React Native - ListView

In this chapter, we will show you how to create a list in React Native. We will import List in our Home component and show it on screen.

import React, { Component } from 'react'

import { Text, View, ListView, StyleSheet } from 'react-native'

class List extends Component {

constructor (props) {

super (props);

const ds = new ListView.DataSource({

rowHasChanged: (r1, r2) => r1 !== r2 });

this.state = {

dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2'])

};

}

render() {

return (

<ListView

dataSource = { this.state.dataSource }

renderRow = { (rowData) => <Text>

{ rowData } </Text> }

/>

)

}

}

export default List

const styles = StyleSheet.create ({

container: {

padding: 10,

marginTop: 3,

backgroundColor: '#d9f9b1',

alignItems: 'center',

},

text: {

color: '#4f603c'

}

})

react native Hello World

Hello World

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. This tutorial is aimed at all audiences

import React, { Component } from 'react';

import { AppRegistry, Text } from 'react-native';

export default class HelloWorldApp extends Component {

  render() {

    return (

      <Text>Hello world!</Text>

    );

  }

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

react native Props

Most components can be customized when they are created, with different parameters. These creation parameters are called props.

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}}/>
    );
  }
}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => Bananas);

react native State

The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated.

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state



Using State

This is our root component. We are just importing Home which will be used in most of the chapters







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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {isShowingText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.isShowingText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

react native Style

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.


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',
  },
});

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);