lift documentation

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components.

When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a render function which returns some JSX to render. Most components can be customized when they are created, with different parameters. These creation parameters are called props. You will have to import components from the react-native package, like Image below.

One basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
render() {
   let pic = {
    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
   };
   return (
   <Image source={pic} style={{width: 193, height: 110}}/>
);
}
}

Notice that {pic} is surrounded by braces, to embed the variable pic into JSX. You can put any JavaScript expression inside braces in JSX. Your own components can also use props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to this.props in your render function.

Some other common components include buttons, sliders, text inputs, and text. They can be used like this:

<Slider value={this.state.value} onValueChange={(value)=>this.setState({value})}/>
<Text>Value: {this.state.value}</Text>
<Button onPress={onPressLearnMore} title="Learn More"/>
<TextInput onChangeText={(text)=>this.setState({text})} value={this.state.text}/>

With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

The style prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here's an example:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
render() {
   return (
    <View>
     <Text style={styles.red}>just red</Text>
     <Text style={styles.bigblue}>just bigblue</Text>
     <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
     <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
    </View>
   );
}
}

const styles = StyleSheet.create({
bigblue: {
   color: 'blue',
   fontWeight: 'bold',
   fontSize: 30,
},
red: {
   color: 'red',
},
});

A full list of all text styling variables for React Native is available here.

A component's height and width determine its size on the screen. Width and heght can be set inside a component, like this:

Use flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

Views can be used to insert things like maps and scrolling abilities into your React Native project. The example below allows users to scroll through text.

<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Text style={{fontSize:96}}>If you like</Text>
<Text style={{fontSize:96}}>Scrolling down</Text>
<Text style={{fontSize:96}}>What's the best</Text>
<Text style={{fontSize:96}}>Framework around?</Text>
<Text style={{fontSize:80}}>React Native</Text>
</ScrollView>

Packages are an integral part of React Native. You can install packages through Node that allow you to use radio buttons, maps, and other elements that are not included in the original React Native package. Packages also enable the use of databases and APIs in your project.

Importing from a package is very similar to importing from the React Native package. You import in this format:

import PropTypes from 'prop-types';

To test your app, download the Expo development tool. Open the desktop app, and open your project inside the desktop app. Wait for the project to compile, then click open in device. This will open your project on an iOS simulator.

From here, you can debug your app without using XCode.

View the answer on StackOverflow.

Information for this documentation was sourced from Facebook Documentation, Medium, React Native, and Stack Overflow.

lift documentation

What is React Native?

Components

Styling

Views

Packages

Testing

FAQ

What is difference between React Native and React?

How to add icons to React Native app

React Native failed to load Android JS bundle

How do you debug react-native?

Sources