The basic syntax of React Native and some components you should know

React Native, at no surprise, is very similar to React- at least by a syntaxial standard. If you have experience with React web development, then much of React Native will come very natural to you. With that said, there are a few differences, the biggest difference being that you can not write HTML within a React Native component. It’s all components, but the file structure, how you import and export components within components, having class components with state and functional components with hooks is still all the same. The biggest difference between a React app and a React Native is that React apps use React-DOM to render the application within web browsers and React Native uses React Native that will convert your code to the Native code of the mobile device you’re using.

There are few main components you need to know to get started writing basic React-Native apps. They are: View, Text, Image, ScrollView, TextInput, and Image. These are just a few of the components that come with React-Native. You will need to import these components from React-Native as you need them. A basic functional component will look like this:

import React from 'react';
import { View, Text, Image, ScrollView, TextInput, StyleSheet } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text>Some text</Text>
<View>
<Text>Some more text</Text>
<Image
source={{
uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
}}
style={styles.img}
/>
</View>
<TextInput
style={styles.txtInput}
defaultValue="You can type in me"
/>
</ScrollView>
);
}
const styles = StyleSheet.create({
txtInput: {
height: 40,
borderColor: 'grey',
borderWidth: 1,
},
img: {
width: 200,
height: 200
}
})export default App;

Looks pretty familar, right? If it looks a little confusing, don’t worry because I will be going through each of these components to explain their purpose and what they do.

I’ll start from the top with ‘ScrollView’. ‘ScrollView’ is a generic scrolling container that can contain multiple components and views. This is will give you the ability to scroll through the content of your page with additional functionalities. You can compare this component to a ‘div’ in HTML. As you can see above, with this component, you will want to have it wrapped around and be a parent to all your other components within your return.

<ScrollView>
...
</ScrollView>

Second, is the ‘Text’ component. This component displays, styles, and nests strings of text and even handles touch event. You can compare this component to the HTML ‘p’ tag. I feel this component doesn’t need much explanation.

<Text style={{fontSize: 15, color: 'firebrickred'}}> 
Hello World!
</Text>

Next we have the ‘View’ component, and probably one of the most used one of the bunch( at least for me so far). The ‘View’ component is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. Like the ‘ScrollView’ component, the ‘View’ component is also comparable to the HTML ‘div’ tag, just without the scrolling functionality. You will want to use this to separate and couple components for easier styling, to add touch handling and accessibility controls to, which I will have a later post about touch handling and accessibility.

<View style={styles.container}>
<Text> You stay classy, Planet Earth! </Text>
</View>

Forth, the ‘Image’ component, used to display different types of images. It’s import to remember to use the source prop and set it equal to a hash with a ‘uri’ key to a value of the path of the image, and this hash will be inside of curly brackets. And of course, the ‘Image’ component’s HTML counterpart is the ‘img’ tag.

<Image source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png',}} style={{width: 50, height: 50}} />

Lastly, there is the ‘TextInput’ component and that allows users to input text (no figure). It’s HTML counterpart being the ‘input’ tag, you can still set the input value, placeholder, and use an onChange event. Only difference, you pass these in as props, and the onChange event is the OnChangeText event.

<TextInput placeholder='holding...' onChangeText={handleChangeTxt} /> 

Which the OnChangeText event works a little differently then it’s onChange counterpart, but that’s for another post, for another day.

This would be a good place to start when learning React-Native. As always, it’s best to check out the React-Native docs to get a deeper dive into the different components and their functionalities. I look forward to the next React-Native blog to share what else I’ve learned. Thanks for reading!

I'm a software developer and recent graduate, with a love for exploring and developing creative solutions to complex problems.