14
React Native Isn't That Scary
Like most web developers in training, when I leaned to use "React", I was actually learning to work with React JS. It wasn't until I began working with React Native that I began to understand the differences between the two technologies.
React JS is front-end library that allows web developers build web apps with interactive user interfaces. These interfaces use reusable components that speed up development time by drying up code.
Web apps built using React JS are FAST cause React JS employs the Virtual DOM. The Virtual DOM is an in-memory representation of the DOM tree. React JS tracks the state of each component. Only when the state of a component changes will the component re-render.
Components built using React JS are composed of the html elements we are all familiar with. You don't have to install any additional software on your machine. As such, it's very easy to get started building.
React Native is very similar to React JS in that it allows developers to build component-based UIs. However, React Native apps are not rendered in the browser. React Native Apps are actual apps that interact with a devices hardware.
Since React Native apps aren't rendered in the browser, React Native doesn't understand divs and form. Instead, you have to use components that the devices hardware understands.
Something else that confused me when I started working with React Native was how to view that applications. You have to install software on your machine that simulates an iPhone and /or an Android in order to view your application.
The View component is to React Native as the div element is to React JS. Whenever you start creating a screen, you're going to start with a View. A View should be used when there is a static amount of content and it can be displayed without the need to scroll.
The ScrollView component should be used when the amount of content is dynamic. For example, if you're iterating over data and displaying an element for each piece of data. If you're designing an app for an iPhone, the SafeAreaView component ensures everything inside your view is visible.
In React Native, css is not a thing. Phones do not recognize style rules that govern how the browser should display web elements. Enter the StyleSheet component.
To use the StyleSheet component, import it as a named import from 'react-native.' Invoke StyleSheet.create and pass in an empty object. Next, add a key that describes the component you need to style (example: submitButton) and point that at an empty object. Add a 'style' property to the component and set it equal to the ..
In general, just change the css style name from kabob casing to camel casing and you'll be ready to style. I like to hit control and space (on a mac) to see possible values.
Unlike React JS, you can't insert text just anywhere. It has to be wrapped in a Text component. Very simple to use.
The TextInput component maps to the input element in html. Two properties you're going to be using with the TextInput are onChangeText and value. To set up a controlled input, the onChangeText property should point to the function that changes the state of the component and the value property should point to the state value.
Buttons are another pretty explanatory component. The onPress property points to a function that executes when the user clicks the button.
I think Pressable components are a little more interesting. They perform the same function as the Button but add flexibility. They have a onLongPress property that points to a function that is triggered only when the user holds the button for more than half a second.
When creating React JS apps, we frequently map over a list and render a component for each element. React native is no different. When working in React Native, there are two elements we use to dynamically display a list of data: FlatList and SectionList.
Use a SectionList when your list contains subsections (for example, a list of contacts separated into As, Bs, Cs, et cetera). Use a FlatList when your list does not contain subsections.
When using a FlatList, pass the array of items you'd like to display into the data property. Into the renderItem property, pass in a function that returns a component. Add a keyExtractor property. This property should be set to a function that returns a unique id (I like using uuid to ensure all my keys are unique).
When implementing a SectionList, use a sections prop instead of data prop. Also, add a renderSectionHeader property that points to a function that renders a header component. This can be as simple as a Text component. Check out the docs for examples cause these components are a little tricker than the rest to learn to use.
Images are also very simple to use. Simply import Image as a named input from 'react-native'. Add the component to a View, and give it a source property. Source is spelled out in its entirety, not 'src.' Source can point at a URL or a require statement.