Introduction to React Native for React Developers
Brief History of React Native
React Native’s development started at an internal hackathon in Facebook in the summer of 2013. The first public preview came in January 2015 at React.js Con. In March of that year, Facebook released React Native to public and open-sourced React Native by making it available on GitHub.
Write Once, Deploy Anywhere
Native app developments is the process of writing apps for a specific operating system. The two main operating systems for mobile development are iOS and Android. The language for writing iOS apps is Swift. The language for writing Android apps is Java, and more recently Kotlin. With React Native, engineers are able to write the same code across operating systems.
React Native for Businesses
Businesses often struggle to find developers with the different skill set required to develop apps in Java, Kotlin, or Swift. Besides hiring different software engineers for each mobile platform is costly and can double the expenses for development. Furthermore, the time required to complete the development cycle is increased. React Native allows software engineers to use the same skill set run their code across Android and iOS devices. The development cycle is also shorter since the code gets written only once.
React Native for Developers
As previously mentioned, React Native’s codebase works across both iOS and Android. Development teams can also more cohesively and closely work on both iOS and Android apps. An important note is that there are features that cannot be implemented solely in JavaScript including push notifications, deep linking, and native UI components. There are two recommended IDEs for React Native developers.The first one is Atom with Nuclicide plugin, which adds support for React Native development. The second one is Visual Studio Code with the React Native extension. However, it is worthwhile to note that Facebook retired and open-sourced the Nuclicide project in December 2018.
Building your first React Native app for React Developers
The first part of the App.js is quite different to React.js. Instead of a Fragment or a div, we use View. The View is where React Native takes the virtual DOM representation and renders native components. The View renders a UIView for iOS and native View in Android. It also looks at Text and renders a UILabel for iOS and TextView for Android.
<View style={styles.container}><Text style={styles.paragraph}>Best Coffee Mugs in London</Text>
The next part is a Card, which needs to be imported from ‘react-native-paper’ at the top of the App.js.
import { Card } from 'react-native-paper';Similarly to React, there is a state and props. Below we are passing in two props for each ProductCard component. The first prop defines the title of the component and the second prop gets the URL of the image.
<Card>
<ProductCard title="White Mug - £19" image="https://images.unsplash.com/photo-1459755486867-b55449bb39ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"/>
<ProductCard title="Green Mug - £9" image="https://images.unsplash.com/photo-1484406528157-81e9e4d24931?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80"/>
</Card>The const style = Stylesheet.create() is similar to a stylesheet in CSS. It defines things such as the padding, background color, margin, font size, font weight, and text alignment for the React Native app.
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
paddingTop: Constants.statusBarHeight,
backgroundColor: ‘#ecf0f1’,
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: ‘bold’,
textAlign: ‘center’,
},
});Rendered App on Expo.io
References
