React Native Part 6: Adding Item to List (Code Snippet)

import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  ScrollView,
  FlatList
} from 'react-native';

export default function App() {
  const [enteredContact, setEnteredContact] = useState('');
  const [contacts, setContacts] = useState([]);

  const contactInputHandler = enteredText => {
  setEnteredContact(enteredText);
  };

  const addContactHandler = () => {
    setContacts(contacts => [
      ...contacts,
      { id: Math.random().toString(), text: enteredContact }
    ]);
  };

  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Course Contact"
          style={styles.input}
          onChangeText={contactInputHandler}
          value={enteredContact}
        />
        <Button title="ADD" onPress={addContactHandler} />
      </View>
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={contacts}
        renderItem={itemData => (
          <View style={styles.listItem}>
            <Text>{itemData.item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50
  },
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  input: {
    width: '80%',
    borderColor: 'black',
    borderWidth: 1,
    padding: 10
  },
  listItem: {
    padding: 10,
    marginVertical: 10,
    backgroundColor: '#ccc',
    borderColor: 'black',
    borderWidth: 1
  }
});

React Native Part 5: FlatList

FlatList is a self contained React Native component which can be used to display a scrollable list of items.

import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

export default function App() {
  const [contacts,setContact] = useState([
    {name: 'Shalvin', key:1},
    {name: 'Joy', key:2},
    {name: 'Arun', key:3},
    {name: 'Lloyd', key:4},
    {name: 'Ronex', key:5},
    {name: 'Abdella', key:6},
    {name: 'Basem', key:7},
  ]);

  return (
    <View style={styles.container}>
      <FlatList 
        data = {contacts}
        renderItem={ ({item}) => (
          <Text style={styles.listItem}>{item.name}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  listItem: {
    padding: 30,
    marginVertical: 10,
    backgroundColor: '#ccc',
    borderColor: 'black',
    borderWidth: 1
  }
});

React Native Part 4: Lists (Code Snippets)

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

export default function App() {
  const [contacts,setContact] = useState([
    {name: 'Shalvin', key:1},
    {name: 'Joy', key:2},
    {name: 'Arun', key:3}
  ]);
  return (
    <View style={styles.container}>
    <View>
     {contacts.map((contact) => (
       <Text key={contact.key}>{contact.name}</Text>
     ))} 
    </View>
    </View>
  );  
}

React Native Part 3: TextInput and useState Hooks

import React, {useState} from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default function App() {
  const[name, setName] = useState('Shalvin');
  return (
    <View style={styles.container}>
      <Text>{name}</Text>
      <TextInput 
      onChangeText= { (val) => setName(val)}
      style={styles.input}></TextInput>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: "black"
  }
});

In the above code I have declared a state called name, and initialized it's value using useState() method.

const[name, setName] = useState('Shalvin');

That name property is displayed inside a Text component. With the onChangeText of TextInput I am changing the state.

 <TextInput 
      onChangeText= { (val) => setName(val)}
      style={styles.input}></TextInput>
    </View>

React Native Part 2: State with Hooks

React Native is based on Components, which are reusable piece of functionalities.

React Native comes with Class based components and Functional components. Functional component is preferred of creating components.

React Hooks are JavaScript functions which can be used from inside functional components. React Hooks was introduced with React version 16.8.
 React Hooks can be used to manage state in a functional component and for handling side effects like Http calls.

For using state management with Hooks we have to import useState from react.

useState() function can be used to initialize the  state. It uses two elements first to hold the value of the state and second the method to update the state.

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

export default function App() {
  const [name, setName] = useState('Shalvin');
  return (
    <View style={styles.container}>
      <Text>Hello { name}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Set State 

import React, {useState} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const [name, setName] = useState('Shalvin');
  return (
    <View style={styles.container}>
      <Text>Hello { name}</Text>
      
      <Button title = "Set Name" 
      onPress = { () => setName('Shalvin P D')}/>
    </View>
  );
}

Object State

import React, {useState} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const [name, setName] = useState('Shalvin')
  const [contact, setContact] = useState(
    {name: 'Shalvin', location: 'Dubai'});

    const changeContact = () =>
    {
      setContact({name: 'Shalvin P D', location: 'Kochi'});
    }

  return (
    <View style={styles.container}>
      <Text>Hello { name}</Text>

      <Button title = "Set Name" 
      onPress = { () => setName('Shalvin P D')}/>

      <Text>Hello {contact.name} located at {contact.location}</Text>
      <Button title= "Set Contact" onPress={ changeContact }></Button>
    </View>
  );
}

React Native : Part 1 Expo

React Native is a JavaScript framework for creating Native Android and iPhone apps developed by Facebook. The official website of React Native is https://reactnative.dev

The React Native components get compiled to native Android or iPhone building blocks. That's not the case with Hybrid applications. Hybrid applications are web application with Mobile look and feel.

For working with React Native you have to install Node. Node is required for accessing npm (Node Package Manager) which is the default Package manger of JavaScript.
Easiest way to get started with React Native is to install Expo CLI. Expo is a wrapper around React Native.
React Native CLI is the preferred way of developing React Native App which I will take up later.

I am using Visual Studio Code as the editor.

npm install --g expo-cli

This command will install expo.

expo init 

expo init command can be used to create a  new React Native Expo Project.

 Here I selected blank as the template which creates an ES6 React Native project.

By navigating to the newly creating project folder and typing code . will open the project in Visual Studio Code.

From Visual Studio Code teminal issue expo start command to run the React Native App.
If Android Emulator is configured, it's possible to run the application in Andoid Emulator. Or else select Run in Web Browser.

App.js is the starting component. There there is import ot react and react-native modules.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello React</Text>
      <Button title = "Hello" onPress={ () => alert('Hello')}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ReactJS Part 1 : Stackblitz

ReactJS is a component based JavaScript library for creating User Interfaces from Facebook. It can be used to create Single Page Applications (SPA) as well as native mobile applications.

React is based on Components. Components are small and isolated pieces of code which can be composed to create complex UI.

React uses ES6. Since ES6 is not supported in all the browsers it has to trans-compiled to  ES5 using Babel.

Setting up a ReactJS development requires installing Node which we will see later. An easier alternative for that matter Angular is  Stackblitz. Stackblitz is on online editor with similar user interface as that of Visual Studio Code. It's possible to login to Stackblitz using GitHub account and have a repository of your code.

Selecting React JavaScript will create a React project with ES6 as the language.


package.json
Inside the project there is a package.json file which contains the dependencies of this project. Inside dependencies section there is the dependency of react and react-dom. React is the core library and react-dom is for DOM manipulation.

{
  "name": "react",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

index.html
Inside the index.html file there is div

<div id="root"></div>

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React Shalvin'
    };
  }

  render() {
    return (
      <div>
       <h1>{this.state.name}</h1>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

React  supports both  class based as well as function based component. Here we see a class based component.

JavaScript Expressions can be embedded within { } syntax.

Every React app will have a root component. Here the App component is the root component.

React components can be either class based or function based. Here the App component is a class component. A class component can have state which is the data of a component.