React Native is a JavaScript library used for developing mobile apps on both iOS and Android platforms. It is different from React.js but shares a similar syntax. React Native builds upon the React library and allows for mobile app development.
Some benefits of using React Native include:
1. Inheriting most concepts from React, making it easier for developers familiar with React.
2. Cross-platform compatibility, supporting iOS, Android, Web, and TVOS. 3. Improved app performance and accuracy due to strong development tools.
4. A large community that facilitates communication and mutual assistance among developers.
To make your paragraph more professional, you can consider rephrasing it like this: “React Native is a JavaScript library specifically designed for mobile app development on both iOS and Android platforms. While it shares a similar syntax with React.js, it stands on its own as a powerful tool. Some key benefits of using React Native include inheriting concepts from React, cross-platform compatibility, improved app performance, and a supportive community of developers.” As for your first React Native app, starting with a simple concept like displaying movies with names and photos is a great idea. To set up the environment, you can install Expo, a powerful tool that allows for quick creation of React Native apps in multiple environments. Expo offers ease and speed in development. After installing Expo CLI, you can create your first app using the command ‘expo init first-react-native’. Once inside the app directory, start the app with ‘expo start’. This will open your app on various devices such as iOS, Android, or even in a web browser for testing.
“As you can see from the image above, the React Native app can be run on multiple devices, including iOS and Android, or shared via a link.
In our case, we will choose to run it in a web browser, which will open in a separate page and on a different port, such as http://localhost:19006/.
Once we have finished coding and refactoring our app, our app structure will include three files: movieList.js, movieCard.js, and App.js.”
The picture above shows we have list of movies are placed and displayed based on Flexbox layout.
We iterated over data movies and rendered each movie on screen by MovieCard component, and styled them using styles.container and styels.box
One pretty nice thing in react native is a flexbox feature which is just 2or 3 lines code and you don’t have to write css codes, everything is ready for using .
with this four lines your card layout is structured
flex:1,
flexDirection:’row’,
flexWrap:’wrap’,
alignItems: ‘flex-start’,
Our movie list after applying flexbox layout and FlatList on it :
So when you change size of your page, so all movie cards automatically structured and changed places dependents on the size of page.
Last thing by using navigator and stack as seen code below we added contract and about to movie list
This was my first app in react, i have learned how to setup first react native app and have have been get familiar with native flexbox,flatlist,navigator,stack, next posts we are going deeper to learn new features in react native.
