Создайте автономное приложение React Native с помощью WatermelonDB

Создайте два файла, models/generate.js и models/randomData.js . generate.js будет использоваться для создания функции generateRecords которая будет генерировать фиктивные записи. randomData.js содержит различные массивы с фиктивными данными, которые используются в generate.js для генерации фиктивных записей.

 // models/generate.js import { times } from "rambdax"; import { movieNames, movieGenre, moviePoster, movieDescription, reviewBodies } from "./randomData"; const flatMap = (fn, arr) => arr.map(fn).reduce((a, b) => a.concat(b), []); const fuzzCount = count => { // Makes the number randomly a little larger or smaller for fake data to seem more realistic const maxFuzz = 4; const fuzz = Math.round((Math.random() - 0.5) * maxFuzz * 2); return count + fuzz; }; const makeMovie = (db, i) => { return db.collections.get("movies").prepareCreate(movie => { movie.title = movieNames[i % movieNames.length] + " " + (i + 1) || movie.id; movie.genre = movieGenre[i % movieGenre.length]; movie.posterImage = moviePoster[i % moviePoster.length]; movie.description = movieDescription; movie.releaseDateAt = new Date().getTime(); }); }; const makeReview = (db, movie, i) => { return db.collections.get("reviews").prepareCreate(review => { review.body = reviewBodies[i % reviewBodies.length] || `review#${review.id}`; review.movie.set(movie); }); }; const makeReviews = (db, movie, count) => times(i => makeReview(db, movie, i), count); // Generates dummy random records. Accepts db object, no. of movies, and no. of reviews for each movie to generate. const generate = async (db, movieCount, reviewsPerPost) => { await db.action(() => db.unsafeResetDatabase()); const movies = times(i => makeMovie(db, i), movieCount); const reviews = flatMap( movie => makeReviews(db, movie, fuzzCount(reviewsPerPost)), movies ); const allRecords = [...movies, ...reviews]; await db.batch(...allRecords); return allRecords.length; }; // Generates 100 movies with up to 10 reviews export async function generateRecords(database) { return generate(database, 100, 10); } 

 // models/randomData.js export const movieNames = [ "The Shawshank Redemption", "The Godfather", "The Dark Knight", "12 Angry Men" ]; export const movieGenre = [ "Action", "Comedy", "Romantic", "Thriller", "Fantasy" ]; export const moviePoster = [ "https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL__QL50.jpg", "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY268_CR3,0,182,268_AL__QL50.jpg", "https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UX182_CR0,0,182,268_AL__QL50.jpg", "https://m.media-amazon.com/images/M/MV5BMWU4N2FjNzYtNTVkNC00NzQ0LTg0MjAtYTJlMjFhNGUxZDFmXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_UX182_CR0,0,182,268_AL__QL50.jpg" ]; export const movieDescription = "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat."; export const reviewBodies = [ "First!!!!", "Cool!", "Why dont you just…", "Maybe useless, but the article is extremely interesting and easy to read. One can definitely try to read it.", "Seriously one of the coolest projects going on right now", "I think the easiest way is just to write a back end that emits .NET IR since infra is already there.", "Open source?", "This article is obviously wrong", "Just Stupid", "The general public won't care", "This is my bear case for Google.", "All true, but as a potential advertiser you don't really get to use all that targeting when placing ads", "I wonder what work environment exists, that would cause a worker to hide their mistakes and endanger the crew, instead of reporting it. And how many more mistakes go unreported? I hope Russia addresses the root issue, and not just fires the person responsible." ]; 

Теперь нам нужно вызвать функцию generateRecords для генерации фиктивных данных.

Мы будем использовать react-navigation для создания маршрутов. Откройте index.js из корня и используйте следующий код:

 // index.js import { AppRegistry } from "react-native"; import { name as appName } from "./app.json"; import { Database } from "@nozbe/watermelondb"; import SQLiteAdapter from "@nozbe/watermelondb/adapters/sqlite"; import { mySchema } from "./src/models/schema"; import { dbModels } from "./src/models/index.js"; // Added new import import { createNavigation } from "./src/screens/Navigation"; // First, create the adapter to the underlying database: const adapter = new SQLiteAdapter({ dbName: "WatermelonDemo", schema: mySchema }); // Then, make a Watermelon database from it! const database = new Database({ adapter, modelClasses: dbModels }); // Change these: const Navigation = createNavigation({ database }); AppRegistry.registerComponent(appName, () => Navigation); 

Мы используем функцию createNavigation , но у нас ее сейчас нет, поэтому давайте создадим ее. Создайте src/screens/Navigation.js и используйте следующий код:

 // screens/Navigation.js import React from "react"; import { createStackNavigator, createAppContainer } from "react-navigation"; import Root from "./Root"; export const createNavigation = props => createAppContainer( createStackNavigator( { Root: { // We have to use a little wrapper because React Navigation doesn't pass simple props (and withObservables needs that) screen: ({ navigation }) => { const { database } = props; return <Root database={database} navigation={navigation} />; }, navigationOptions: { title: "Movies" } } }, { initialRouteName: "Root", initialRouteParams: props } ) ); 

Мы используем Root в качестве первого экрана, поэтому давайте создадим screens/Root.js и используем следующий код:

 // screens/Root.js import React, { Component } from "react"; import { generateRecords } from "../models/generate"; import { Alert } from "react-native"; import { Container, Content, Button, Text } from "native-base"; import MovieList from "../components/MovieList"; export default class Root extends Component { state = { isGenerating: false }; generate = async () => { this.setState({ isGenerating: true }); const count = await generateRecords(this.props.database); Alert.alert(`Generated ${count} records!`); this.setState({ isGenerating: false }); }; render() { const { isGenerating } = this.state; const { database, navigation } = this.props; return ( <Container> <Content> <Button bordered full onPress={this.generate} style={{ marginTop: 5 }} > <Text>Generate Dummy records</Text> </Button> {!isGenerating && ( <MovieList database={database} search="" navigation={navigation} /> )} </Content> </Container> ); } } 

Мы использовали MovieList чтобы показать список сгенерированных фильмов. Давайте создадим это. Создайте новый файл src/components/MovieList.js как src/components/MovieList.js ниже:

 // components/MovieList.js import React from "react"; import { Q } from "@nozbe/watermelondb"; import withObservables from "@nozbe/with-observables"; import { List, ListItem, Body, Text } from "native-base"; const MovieList = ({ movies }) => ( <List> {movies.map(movie => ( <ListItem key={movie.id}> <Body> <Text>{movie.title}</Text> </Body> </ListItem> ))} </List> ); // withObservables is HOC(Higher Order Component) to make any React component reactive. const enhance = withObservables(["search"], ({ database, search }) => ({ movies: database.collections .get("movies") .query(Q.where("title", Q.like(`%${Q.sanitizeLikeString(search)}%`))) })); export default enhance(MovieList); 

MovieList — это простой компонент React, отображающий список фильмов, но withObservables внимание на enhance , withObservables . withObservables — это HOC (компонент более withObservables порядка), чтобы сделать любой компонент React реактивным в WatermelonDB. Если мы изменим значение фильма в любом месте нашего приложения, оно будет перерисовано, чтобы отразить изменения. Второй аргумент ({ database, search }) содержит реквизиты компонента. search передается из Root.js и database передается из Navigation.js . Первый аргумент ["search"] — это список реквизитов, которые запускают повторный запуск наблюдения. Таким образом, если search меняется, наши наблюдаемые объекты пересчитываются и снова наблюдаются. В функции мы используем объект database чтобы получить коллекцию фильмов, где title похож на пропущенный search . Специальные символы, такие как % и _ , не экранируются автоматически, поэтому всегда рекомендуется использовать очищенный пользовательский ввод.

Откройте вашу Android Studio или Xcode, чтобы синхронизировать проект, а затем запустите приложение. Нажмите на кнопку GENERATE DUMMY RECORDS . Он сгенерирует фиктивные данные и покажет вам список.

 npm run start:android # or npm run start:ios 

Этот код доступен в ветке v0.2 .

Добавить все операции CRUD (v1)

Давайте теперь добавим функциональность для создания / обновления / удаления фильмов и обзоров. Мы добавим новую кнопку, чтобы добавить новый фильм, а также создадим TextInput для передачи поискового ключевого слова в запрос. Итак, откройте Root.js и измените его содержимое, как Root.js ниже:

 // screens/Root.js import React, { Component } from "react"; import { generateRecords } from "../models/generate"; import { Alert } from "react-native"; import { View, Container, Content, Button, Text, Form, Item, Input, Label, Body } from "native-base"; import MovieList from "../components/MovieList"; import styles from "../components/styles"; export default class Root extends Component { state = { isGenerating: false, search: "", isSearchFocused: false }; generate = async () => { this.setState({ isGenerating: true }); const count = await generateRecords(this.props.database); Alert.alert(`Generated ${count} records!`); this.setState({ isGenerating: false }); }; // add these: addNewMovie = () => { this.props.navigation.navigate("NewMovie"); }; handleTextChanges = v => this.setState({ search: v }); handleOnFocus = () => this.setState({ isSearchFocused: true }); handleOnBlur = () => this.setState({ isSearchFocused: false }); render() { const { search, isGenerating, isSearchFocused } = this.state; const { database, navigation } = this.props; return ( <Container style={styles.container}> <Content> {!isSearchFocused && ( <View style={styles.marginContainer}> <Button bordered full onPress={this.generate} style={{ marginTop: 5 }} > <Text>Generate Dummy records</Text> </Button> {/* add these: */} <Button bordered full onPress={this.addNewMovie} style={{ marginTop: 5 }} > <Text>Add new movie</Text> </Button> <Body /> </View> )} {/* add these: */} <Form> <Item floatingLabel> <Label>Search...</Label> <Input onFocus={this.handleOnFocus} onBlur={this.handleOnBlur} onChangeText={this.handleTextChanges} /> </Item> </Form> {!isGenerating && ( <MovieList database={database} search={search} navigation={navigation} /> )} </Content> </Container> ); } } 

Мы создадим новый экран MovieForm.js , а также MovieForm.js использовать этот же компонент для редактирования фильма. Заметьте, что мы просто вызываем метод handleSubmit , который, в свою очередь, вызывает handleAddNewMovie или handleUpdateMovie . handleUpdateMovie вызывает действие, которое мы определили ранее в нашей модели Movie . Вот и все. Это позаботится о сохранении этого и обновлении везде. Используйте следующий код для MovieForm.js :

 // screens/MovieForm.js import React, { Component } from "react"; import { View, Button, Container, Content, Form, Item, Input, Label, Textarea, Picker, Body, Text, DatePicker } from "native-base"; import { movieGenre } from "../models/randomData"; class MovieForm extends Component { constructor(props) { super(props); if (props.movie) { this.state = { ...props.movie.getMovie() }; } else { this.state = {}; } } render() { return ( <Container> <Content> <Form> <Item floatingLabel> <Label>Title</Label> <Input onChangeText={title => this.setState({ title })} value={this.state.title} /> </Item> <View style={{ paddingLeft: 15 }}> <Item picker> <Picker mode="dropdown" style={{ width: undefined, paddingLeft: 15 }} placeholder="Genre" placeholderStyle={{ color: "#bfc6ea" }} placeholderIconColor="#007aff" selectedValue={this.state.genre} onValueChange={genre => this.setState({ genre })} > {movieGenre.map((genre, i) => ( <Picker.Item key={i} label={genre} value={genre} /> ))} </Picker> </Item> </View> <Item floatingLabel> <Label>Poster Image</Label> <Input onChangeText={posterImage => this.setState({ posterImage })} value={this.state.posterImage} /> </Item> <View style={{ paddingLeft: 15, marginTop: 15 }}> <Text style={{ color: "gray" }}>Release Date</Text> <DatePicker locale={"en"} animationType={"fade"} androidMode={"default"} placeHolderText="Change Date" defaultDate={new Date()} onDateChange={releaseDateAt => this.setState({ releaseDateAt })} /> <Text> {this.state.releaseDateAt && this.state.releaseDateAt.toString().substr(4, 12)} </Text> <Text style={{ color: "gray", marginTop: 15 }}>Description</Text> <Textarea rowSpan={5} bordered placeholder="Description..." onChangeText={description => this.setState({ description })} value={this.state.description} /> </View> {!this.props.movie && ( <View style={{ paddingLeft: 15, marginTop: 15 }}> <Text style={{ color: "gray" }}>Review</Text> <Textarea rowSpan={5} bordered placeholder="Review..." onChangeText={review => this.setState({ review })} value={this.state.review} /> </View> )} <Body> <Button onPress={this.handleSubmit}> <Text>{this.props.movie ? "Update " : "Add "} Movie</Text> </Button> </Body> </Form> </Content> </Container> ); } handleSubmit = () => { if (this.props.movie) { this.handleUpdateMovie(); } else { this.handleAddNewMovie(); } }; handleAddNewMovie = async () => { const { database } = this.props; const movies = database.collections.get("movies"); const newMovie = await movies.create(movie => { movie.title = this.state.title; movie.genre = this.state.genre; movie.posterImage = this.state.posterImage; movie.description = this.state.description; movie.releaseDateAt = this.state.releaseDateAt.getTime(); }); this.props.navigation.goBack(); }; handleUpdateMovie = async () => { const { movie } = this.props; await movie.updateMovie({ title: this.state.title, genre: this.state.genre, posterImage: this.state.posterImage, description: this.state.description, releaseDateAt: this.state.releaseDateAt.getTime() }); this.props.navigation.goBack(); }; } export default MovieForm; по // screens/MovieForm.js import React, { Component } from "react"; import { View, Button, Container, Content, Form, Item, Input, Label, Textarea, Picker, Body, Text, DatePicker } from "native-base"; import { movieGenre } from "../models/randomData"; class MovieForm extends Component { constructor(props) { super(props); if (props.movie) { this.state = { ...props.movie.getMovie() }; } else { this.state = {}; } } render() { return ( <Container> <Content> <Form> <Item floatingLabel> <Label>Title</Label> <Input onChangeText={title => this.setState({ title })} value={this.state.title} /> </Item> <View style={{ paddingLeft: 15 }}> <Item picker> <Picker mode="dropdown" style={{ width: undefined, paddingLeft: 15 }} placeholder="Genre" placeholderStyle={{ color: "#bfc6ea" }} placeholderIconColor="#007aff" selectedValue={this.state.genre} onValueChange={genre => this.setState({ genre })} > {movieGenre.map((genre, i) => ( <Picker.Item key={i} label={genre} value={genre} /> ))} </Picker> </Item> </View> <Item floatingLabel> <Label>Poster Image</Label> <Input onChangeText={posterImage => this.setState({ posterImage })} value={this.state.posterImage} /> </Item> <View style={{ paddingLeft: 15, marginTop: 15 }}> <Text style={{ color: "gray" }}>Release Date</Text> <DatePicker locale={"en"} animationType={"fade"} androidMode={"default"} placeHolderText="Change Date" defaultDate={new Date()} onDateChange={releaseDateAt => this.setState({ releaseDateAt })} /> <Text> {this.state.releaseDateAt && this.state.releaseDateAt.toString().substr(4, 12)} </Text> <Text style={{ color: "gray", marginTop: 15 }}>Description</Text> <Textarea rowSpan={5} bordered placeholder="Description..." onChangeText={description => this.setState({ description })} value={this.state.description} /> </View> {!this.props.movie && ( <View style={{ paddingLeft: 15, marginTop: 15 }}> <Text style={{ color: "gray" }}>Review</Text> <Textarea rowSpan={5} bordered placeholder="Review..." onChangeText={review => this.setState({ review })} value={this.state.review} /> </View> )} <Body> <Button onPress={this.handleSubmit}> <Text>{this.props.movie ? "Update " : "Add "} Movie</Text> </Button> </Body> </Form> </Content> </Container> ); } handleSubmit = () => { if (this.props.movie) { this.handleUpdateMovie(); } else { this.handleAddNewMovie(); } }; handleAddNewMovie = async () => { const { database } = this.props; const movies = database.collections.get("movies"); const newMovie = await movies.create(movie => { movie.title = this.state.title; movie.genre = this.state.genre; movie.posterImage = this.state.posterImage; movie.description = this.state.description; movie.releaseDateAt = this.state.releaseDateAt.getTime(); }); this.props.navigation.goBack(); }; handleUpdateMovie = async () => { const { movie } = this.props; await movie.updateMovie({ title: this.state.title, genre: this.state.genre, posterImage: this.state.posterImage, description: this.state.description, releaseDateAt: this.state.releaseDateAt.getTime() }); this.props.navigation.goBack(); }; } export default MovieForm; 

Мы разделим наш MovieList.js чтобы мы могли контролировать рендеринг в компоненте без состояния. Обновите его следующим образом:

 // components/MovieList.js import React from "react"; import { Q } from "@nozbe/watermelondb"; import withObservables from "@nozbe/with-observables"; import RawMovieItem from "./RawMovieItem"; import { List } from "native-base"; // add these: const MovieItem = withObservables(["movie"], ({ movie }) => ({ movie: movie.observe() }))(RawMovieItem); const MovieList = ({ movies, navigation }) => ( <List> {movies.map(movie => ( // change these: <MovieItem key={movie.id} movie={movie} countObservable={movie.reviews.observeCount()} onPress={() => navigation.navigate("Movie", { movie })} /> ))} </List> ); const enhance = withObservables(["search"], ({ database, search }) => ({ movies: database.collections .get("movies") .query(Q.where("title", Q.like(`%${Q.sanitizeLikeString(search)}%`))) })); export default enhance(MovieList); 

 // components/RawMovieItem.js import React from "react"; import withObservables from "@nozbe/with-observables"; import { ListItem, Thumbnail, Text, Left, Body, Right, Button, Icon } from "native-base"; // We observe and render the counter in a separate component so that we don't have to wait for the database until we can render the component. You can also prefetch all data before displaying the list const RawCounter = ({ count }) => count; const Counter = withObservables(["observable"], ({ observable }) => ({ count: observable }))(RawCounter); const CustomListItem = ({ movie, onPress, countObservable }) => ( <ListItem thumbnail onPress={onPress}> <Left> <Thumbnail square source={{ uri: movie.posterImage }} /> </Left> <Body> <Text>{movie.title}</Text> <Text note numberOfLines={1}> Total Reviews: <Counter observable={countObservable} /> </Text> </Body> <Right> <Button transparent onPress={onPress}> <Icon name="arrow-forward" /> </Button> </Right> </ListItem> ); export default CustomListItem; 

 // screens/Movie.js import React, { Component } from "react"; import { View, Card, CardItem, Text, Button, Icon, Left, Body, Textarea, H1, H2, Container, Content } from "native-base"; import withObservables from "@nozbe/with-observables"; import styles from "../components/styles"; import FullWidthImage from "react-native-fullwidth-image"; import ReviewList from "../components/ReviewList"; class Movie extends Component { state = { review: "" }; render() { const { movie, reviews } = this.props; return ( <Container style={styles.container}> <Content> <Card style={{ flex: 0 }}> <FullWidthImage source={{ uri: movie.posterImage }} ratio={1} /> <CardItem /> <CardItem> <Left> <Body> <H2>{movie.title}</H2> <Text note textStyle={{ textTransform: "capitalize" }}> {movie.genre} </Text> <Text note> {movie.releaseDateAt.toString().substr(4, 12)} </Text> </Body> </Left> </CardItem> <CardItem> <Body> <Text>{movie.description}</Text> </Body> </CardItem> <CardItem> <Left> <Button transparent onPress={this.handleDelete} textStyle={{ color: "#87838B" }} > <Icon name="md-trash" /> <Text>Delete Movie</Text> </Button> <Button transparent onPress={this.handleEdit} textStyle={{ color: "#87838B" }} > <Icon name="md-create" /> <Text>Edit Movie</Text> </Button> </Left> </CardItem> <View style={styles.newReviewSection}> <H1>Add new review</H1> <Textarea rowSpan={5} bordered placeholder="Review..." onChangeText={review => this.setState({ review })} value={this.state.review} /> <Body style={{ marginTop: 10 }}> <Button bordered onPress={this.handleAddNewReview}> <Text>Add review</Text> </Button> </Body> </View> <ReviewList reviews={reviews} /> </Card> </Content> </Container> ); } handleAddNewReview = () => { let { movie } = this.props; movie.addReview(this.state.review); this.setState({ review: "" }); }; handleEdit = () => { let { movie } = this.props; this.props.navigation.navigate("EditMovie", { movie }); }; handleDelete = () => { let { movie } = this.props; movie.deleteMovie(); this.props.navigation.goBack(); }; } const enhance = withObservables(["movie"], ({ movie }) => ({ movie: movie.observe(), reviews: movie.reviews.observe() })); export default enhance(Movie); 

 // components/ReviewList.js import React from "react"; import withObservables from "@nozbe/with-observables"; import { List, View, H1 } from "native-base"; import RawReviewItem from "./RawReviewItem"; import styles from "./styles"; const ReviewItem = withObservables(["review"], ({ review }) => ({ review: review.observe() }))(RawReviewItem); const ReviewList = ({ reviews }) => { if (reviews.length > 0) { return ( <View style={styles.allReviewsSection}> <H1>Reviews</H1> <List> {reviews.map(review => ( <ReviewItem review={review} key={review.id} /> ))} </List> </View> ); } else { return null; } }; export default ReviewList; 

 // components/RawReviewItem.js import React from "react"; import { ListItem, Text, Left, Right, Button, Icon } from "native-base"; // We observe and render the counter in a separate component so that we don't have to wait for the database until we can render the component. You can also prefetch all data before displaying the list. const RawReviewItem = ({ review }) => { handleDeleteReview = () => { review.deleteReview(); }; return ( <ListItem> <Left> <Text>{review.body}</Text> </Left> <Right> <Button transparent onPress={this.handleDeleteReview}> <Icon name="md-trash" /> </Button> </Right> </ListItem> ); }; export default RawReviewItem; 

 // screens/Navigation.js import React from "react"; import { createStackNavigator, createAppContainer } from "react-navigation"; import Root from "./Root"; import Movie from "./Movie"; import MovieForm from "./MovieForm"; export const createNavigation = props => createAppContainer( createStackNavigator( { Root: { // We have to use a little wrapper because React Navigation doesn't pass simple props (and withObservables needs that) screen: ({ navigation }) => { const { database } = props; return <Root database={database} navigation={navigation} />; }, navigationOptions: { title: "Movies" } }, Movie: { screen: ({ navigation }) => ( <Movie movie={navigation.state.params.movie} navigation={navigation} /> ), navigationOptions: ({ navigation }) => ({ title: navigation.state.params.movie.title }) }, NewMovie: { screen: ({ navigation }) => { const { database } = props; return <MovieForm database={database} navigation={navigation} />; }, navigationOptions: { title: "New Movie" } }, EditMovie: { screen: ({ navigation }) => { return ( <MovieForm movie={navigation.state.params.movie} navigation={navigation} /> ); }, navigationOptions: ({ navigation }) => ({ title: `Edit "${navigation.state.params.movie.title}"` }) } }, { initialRouteName: "Root", initialRouteParams: props } ) ); 

 // components/styles.js import { StyleSheet } from "react-native"; export default StyleSheet.create({ container: { flex: 1, paddingHorizontal: 10, marginVertical: 10 }, marginContainer: { marginVertical: 10, flex: 1 }, newReviewSection: { marginTop: 10, paddingHorizontal: 15 }, allReviewsSection: { marginTop: 30, paddingHorizontal: 15 } }); 

 npm run start:android # or npm run start:ios