React Native Notes

reactnative.md

Initializing React Native

Enter these commands in the terminal

1. npm install react-native
2. npm install react-native-cli
3. brew install watchman
4. Optional https://atom.io/packages/react-native-snippets

To initialize your react native project

• react-native init AppName
• Open up your iOS Simulator or Android Virtual Device
• react-native run-ios or react-native run-android to start

Importing and Exporting React Components

• Libraries that are installed using npm or yarn are enclosed within the '<package name> '
• import React from 'react'; will import the react library
• Components that are created and exported need to state the component's source
• import Header from './src/components/header';
• To render 2 or more components, place the components within a <View> tag

Functional and Class Components

• Functional Components are used for for presenting static data
• denoted by

const Header = () => {
    return<Text> hi there! </Text>
}

• Class Components are used for dynamic sources of data ( API requests)
• denoted by:

class Header extends Component {
    render() {
        return <Text>Hi there!</Text>
    }
}

React Native Props aka properties

Passing properties around react components is core to react

1. Identify the variable that will change with each scene.
2. Pass the variable as an agrument in the variable
3. Enclose the property you'll want to pass to component within the components and in the component use {props.children} to render the data.

const Header = (props) => {
    return (
      {props.headerText}
      // now the parent component will need to pass a headerText whenever the component Header is used
    );
  };
  
  <Header headerText={'Pass me In'} />;
  // Passing in headertext 

React Native Styling

• By default all react components without styling will be rendered to the top left of the screen.

• justifyContent handles vertical movement of objects

• justifyContent: 'flex-end' will move it to the bottom of the screen

• justifyContent: 'center' will move it to the center of the screen.

• justifyContent: 'flex-start' will move it to the top of the screen.

• justifyContent: 'space-between' will ensure all elements have equal spacing between them.

• justifyContent: 'space-around' ensures equal spacing between and around (top and bottom) elements.

• flexDirection: 'column' will render all justifyContent movement with respect to vertical movement(not entirely sure how to explain this

• flexDirection: 'row' will render all justifyContent movement with respect to horizontal movement(not entirely sure how to explain this

• alignItems handles horizontal movement of objects

• alignItems: 'flex-end' will move it to the top-right of the screen

• alignItems: 'center' will move it to the center of the screen.

• alignItems: 'flex-start' will move it to the top-left of the screen.

Overriding styles

const CardSection = (props) => {
  return (
    <View style={[styles.containerStyle, props.style]}>
      {props.children}
    </View>
  );
};

• the style props will now be in an array and the right most style will be selected
• this will enable your customized common components to have a base style which is containerStyle and a customizable style

Images

• React Native requires specification on the image height and width for the image to be rendered
• Image styling tips

flex: 1
width: null

• The image would fill the entire screen with respect to the screen

React Native State

• state is a JS object use to record and respond to user-triggered events.
• Declare the initial state of the component using a class level object like state={}
• this.setState will update the state of the component (this.state)

LifeCycle Methods

• Handles the network requests and is displayed when needed and

Gesture based events

Scrolling

1. Identify the component which will be scrollable
2. Change the tag to and make sure to import ScrollView !
3. Add style={{ flex: 1}} to the root component View

Handling User Events

<TouchableOpacity onPress={() => console.log(pressed)}></TouchableOpacity>

Navigating Users Around

Linking

1. Similar to the <a> anchor tag in html, provides the user the ability to visit external URLs within your mobile app

React Native Conventions

1. Component styling is done in the js file itself, usually at the bottom
2. Component File Names are in CamelCase
3. Parent to child component, use props
4. State is for components internal record keeping or internal data update
5. If more than 3 props references is used in your component consider destrucuring it so its neater