Best React Native and Flutter Training in Kochi | Top React and Flutter Training in Ernakulam

How to Add a Splash Screen to a React Native App.?

Have you ever created an application using React Native? or working on one? so what is the first step your application to load on a device? well I must say very first element everyone want's to load in an application when running on a device is splash screen or simply we can say a Loading Screen Showing Logo of your application or anything else you want to show to user before he/she actually start using your application every time application opens

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome</Text>
        <Image style={styles.img} source={{uri:'https://reacthub.org/assets/logo.png'}} />
        <View style={styles.textView}>
          <Text style={styles.text}>Powered by<Text style={styles.company}> Lookings Soft</Text></Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 20,
    justifyContent: 'center'
  },
  welcome: {
    fontSize: 30,
    fontWeight: 'bold',
    fontStyle: 'italic',
    textAlign: 'center',
    marginBottom: 50
  },
  img: {
    width: '100%',
    height: '20%',
    resizeMode: 'contain'
  },
  textView: {
    alignItems: 'flex-end',
  },
  text: {
    fontSize: 16,
    paddingTop: 20,
  },
  company: {
    fontWeight: 'bold',
    fontStyle: 'italic'
  }
})

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome</Text>
        <Image style={styles.img} source={{uri:'https://reacthub.org/assets/logo.png'}} />
        <View style={styles.textView}>
          <Text style={styles.text}>Powered by<Text style={styles.company}> Lookings Soft</Text></Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 20,
    justifyContent: 'center'
  },
  welcome: {
    fontSize: 30,
    fontWeight: 'bold',
    fontStyle: 'italic',
    textAlign: 'center',
    marginBottom: 50
  },
  img: {
    width: '100%',
    height: '20%',
    resizeMode: 'contain'
  },
  textView: {
    alignItems: 'flex-end',
  },
  text: {
    fontSize: 16,
    paddingTop: 20,
  },
  company: {
    fontWeight: 'bold',
    fontStyle: 'italic'
  }
})

Onboarding in React Native App

There are various factors for user retention of your mobile app but keeping the famous saying in mind, the first impression is the last a great user onboarding process is the key to success. In the current time where every entrepreneur aims to build an app to be used by millions of users, the main focus should be a well designed user friendly onboarding screen

import React, { Component } from 'react'
import { View, StyleSheet, Image, Text, TouchableOpacity, Dimensions } from 'react-native'

const { height, width } = Dimensions.get('screen')

export default class App extends Component {
render() {
  return (
    <View style={styles.container}>
      <View style={styles.viewimg}>
        <Image style={styles.img} source={{uri:'https://reacthub.org/assets/start.png'}} />
      </View>
      <View style={styles.viewtext}>
        <Text style={styles.texthead}>Enjoy OZO</Text>
        <Text style={styles.textdetail}>Add/Explore your offers </Text>
      </View>
      <View style={styles.viewstart}>
        <TouchableOpacity style={styles.touchable}>
          <Text style={styles.textstarted}>Get Started</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}
}

const styles = StyleSheet.create({
container: {
  flex: 1
},
viewimg: {
  height: height * .6,
  alignItems: 'center',
  justifyContent: 'center',
},
img: {
  height: height * .5,
  width: '100%',
  resizeMode: 'contain'
},
viewtext: {
  height: height * .15,
  alignItems: 'center',
  paddingLeft: 20,
  paddingRight: 20,
},
texthead: {
  fontSize: 24,
  fontWeight: 'bold',
  color: 'black'
},
textdetail: {
  fontSize: 16,
  paddingTop: 20,
  textAlign: 'center',
  fontStyle: 'italic'
},
viewstart: {
  position: 'absolute',
  zIndex: 10,
  bottom: 30,
  right: 10,
  left: 10
},
touchable: {
  height: 60,
  width: '100%',
  borderRadius: 10,
  backgroundColor: '#bd081c',
  justifyContent: 'center'
},
textstarted: {
  textAlign: 'center',
  fontSize: 18,
  color: 'white',
  fontWeight: "bold"
},
})

                                    import React, { Component } from 'react'
                                    import { View, StyleSheet, Image, Text, TouchableOpacity, Dimensions } from 'react-native'
                                    
                                    const { height, width } = Dimensions.get('screen')
                                    
                                    export default class App extends Component {
                                      render() {
                                        return (
                                          <View style={styles.container}>
                                            <View style={styles.viewimg}>
                                              <Image style={styles.img} source={{uri:'https://reacthub.org/assets/start.png'}} />
                                            </View>
                                            <View style={styles.viewtext}>
                                              <Text style={styles.texthead}>Enjoy OZO</Text>
                                              <Text style={styles.textdetail}>Add/Explore your offers </Text>
                                            </View>
                                            <View style={styles.viewstart}>
                                              <TouchableOpacity style={styles.touchable}>
                                                <Text style={styles.textstarted}>Get Started</Text>
                                              </TouchableOpacity>
                                            </View>
                                          </View>
                                        )
                                      }
                                    }
                                    
                                    const styles = StyleSheet.create({
                                      container: {
                                        flex: 1
                                      },
                                      viewimg: {
                                        height: height * .6,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                      },
                                      img: {
                                        height: height * .5,
                                        width: '100%',
                                        resizeMode: 'contain'
                                      },
                                      viewtext: {
                                        height: height * .15,
                                        alignItems: 'center',
                                        paddingLeft: 20,
                                        paddingRight: 20,
                                      },
                                      texthead: {
                                        fontSize: 24,
                                        fontWeight: 'bold',
                                        color: 'black'
                                      },
                                      textdetail: {
                                        fontSize: 16,
                                        paddingTop: 20,
                                        textAlign: 'center',
                                        fontStyle: 'italic'
                                      },
                                      viewstart: {
                                        position: 'absolute',
                                        zIndex: 10,
                                        bottom: 30,
                                        right: 10,
                                        left: 10
                                      },
                                      touchable: {
                                        height: 60,
                                        width: '100%',
                                        borderRadius: 10,
                                        backgroundColor: '#bd081c',
                                        justifyContent: 'center'
                                      },
                                      textstarted: {
                                        textAlign: 'center',
                                        fontSize: 18,
                                        color: 'white',
                                        fontWeight: "bold"
                                      },
                                    })

Creating Login Screen in React Native App

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 uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. In this article, we will show you how to create a Login Screen using React-Native that will work for both iOS and Android Platform.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
  Image,
} from 'react-native';

export default class LoginView extends Component {

  constructor(props) {
    super(props);
    state = {
      email: '',
      password: '',
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={{uri:'https://reacthub.org/assets/login.png'}} style={styles.img} />
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{ uri: 'https://png.icons8.com/message/ultraviolet/50/3498db' }} />
          <TextInput style={styles.inputs}
                                    placeholder="Email"
                                    keyboardType="email-address"
                                    underlineColorAndroid='transparent'
                                    onChangeText={(email) => this.setState({ email })} />
        </View>
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{ uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db' }} />
          <TextInput style={styles.inputs}
                                    placeholder="Password"
                                    secureTextEntry={true}
                                    underlineColorAndroid='transparent'
                                    onChangeText={(password) => this.setState({ password })} />
        </View>
        <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.buttonContainer}>
          <Text style={styles.text}>Forgot your password?</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.buttonContainer}>
          <Text style={styles.text}>Register</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9c9c9c',
    padding: 20
  },
  img: {
    width: 300,
    height:60,
    resizeMode: 'contain',
    marginBottom:30
  },
  inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: 'row',
    alignItems: 'center'
  },
  inputs: {
    height: 45,
    marginLeft: 16,
    borderBottomColor: '#FFFFFF',
    flex: 1,
  },
  inputIcon: {
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: 'center'
  },
  buttonContainer: {
    height: 45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
  },
  text: {
    color: 'white'
  },
  loginButton: {
    backgroundColor: "#00b5ec",
  },
  loginText: {
    color: 'white',
  }
});

import React, { Component } from 'react';
                                    import {
                                      StyleSheet,
                                      Text,
                                      View,
                                      TextInput,
                                      TouchableHighlight,
                                      Image,
                                    } from 'react-native';
                                    
                                    export default class LoginView extends Component {
                                    
                                      constructor(props) {
                                        super(props);
                                        state = {
                                          email: '',
                                          password: '',
                                        }
                                      }
                                    
                                      render() {
                                        return (
                                          <View style={styles.container}>
                                            <Image source={{uri:'https://reacthub.org/assets/login.png'}} style={styles.img} />
                                            <View style={styles.inputContainer}>
                                              <Image style={styles.inputIcon} source={{ uri: 'https://png.icons8.com/message/ultraviolet/50/3498db' }} />
                                              <TextInput style={styles.inputs}
                                    placeholder="Email"
                                    keyboardType="email-address"
                                    underlineColorAndroid='transparent'
                                    onChangeText={(email) => this.setState({ email })} />
                                            </View>
                                            <View style={styles.inputContainer}>
                                              <Image style={styles.inputIcon} source={{ uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db' }} />
                                              <TextInput style={styles.inputs}
                                    placeholder="Password"
                                    secureTextEntry={true}
                                    underlineColorAndroid='transparent'
                                    onChangeText={(password) => this.setState({ password })} />
                                            </View>
                                            <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]}>
                                              <Text style={styles.loginText}>Login</Text>
                                            </TouchableHighlight>
                                            <TouchableHighlight style={styles.buttonContainer}>
                                              <Text style={styles.text}>Forgot your password?</Text>
                                            </TouchableHighlight>
                                            <TouchableHighlight style={styles.buttonContainer}>
                                              <Text style={styles.text}>Register</Text>
                                            </TouchableHighlight>
                                          </View>
                                        );
                                      }
                                    }
                                    
                                    const styles = StyleSheet.create({
                                      container: {
                                        flex: 1,
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        backgroundColor: '#9c9c9c',
                                        padding: 20
                                      },
                                      img: {
                                        width: 300,
                                        height:60,
                                        resizeMode: 'contain',
                                        marginBottom:30
                                      },
                                      inputContainer: {
                                        borderBottomColor: '#F5FCFF',
                                        backgroundColor: '#FFFFFF',
                                        borderRadius: 30,
                                        borderBottomWidth: 1,
                                        width: 250,
                                        height: 45,
                                        marginBottom: 20,
                                        flexDirection: 'row',
                                        alignItems: 'center'
                                      },
                                      inputs: {
                                        height: 45,
                                        marginLeft: 16,
                                        borderBottomColor: '#FFFFFF',
                                        flex: 1,
                                      },
                                      inputIcon: {
                                        width: 30,
                                        height: 30,
                                        marginLeft: 15,
                                        justifyContent: 'center'
                                      },
                                      buttonContainer: {
                                        height: 45,
                                        flexDirection: 'row',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        marginBottom: 20,
                                        width: 250,
                                        borderRadius: 30,
                                      },
                                      text: {
                                        color: 'white'
                                      },
                                      loginButton: {
                                        backgroundColor: "#00b5ec",
                                      },
                                      loginText: {
                                        color: 'white',
                                      }
                                    });

Creating Facebook like Feed in React Native app

The Activity feed displays the most interesting, recent activity taking place on your site, using actions (such as likes) by your friends and other people.To demonstrate this tutorial I created an example json feed which contains an array of json feed object. Each object defines single feed row where it contains information like feed id, profile pic, profile name, timestamp, status message and feed image.

import React from 'react';
import { StyleSheet, ActivityIndicator, Text, View, ImageBackground, TouchableOpacity, Button, Image, TextInput, FlatList } from 'react-native';


export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      showProgress: true,content: [] 
    }
  }

  componentDidMount() {
    return fetch('https://api.androidhive.info/feed/feed.json').then((response) => response.json()).then((responseData) => {
      this.setState({ showProgress: false,content: responseData.feed })
    })
  }

  render() {
    if (this.state.showProgress) {
      return (
        <View style={{ flex: 10, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    }
    else {
      return (
        <View style={{ flex: 10, backgroundColor: '#d3d6db' }}>
          <View style={{ flex: 1, borderRadius: 20, marginLeft: 10, marginRight: 10, marginTop: 10 }}>
            <FlatList
                                    data={this.state.content}
                                    keyExtractor={(item, index) => index.toString()}
              renderItem={({ item }) => <View style={{ flex: 1, marginBottom: 10, backgroundColor: '#d3d6db', justifyContent: 'center', alignItems: 'center' }}>
                <TouchableOpacity style={{ flex: 1, width: '100%', height: 350, borderRadius: 5, backgroundColor: '#ffffff' }}>
                  <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                    <Image
                      style={{ width: 50, height: 50, margin: 10 }}
                      source={{ uri: item.profilePic }}
                    />
                    <Text style={{ color: '#252525', fontWeight: 'bold' }}>{item.name}</Text>
                  </View>
                  <View style={{ flex: 3, justifyContent: 'flex-start' }}>
                    <Text style={{ color: '#252525', marginRight: 10, marginLeft: 10 }}>{item.status}</Text>
                    <Image
                      style={{ width: '100%', height: '70%', resizeMode: 'stretch' }}
                      source={{ uri: item.image }}
                    />
                  </View>
                </TouchableOpacity>
              </View>}
            />
          </View>
        </View>
      );
    }
  }
}


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

import React from 'react';
        import { StyleSheet, ActivityIndicator, Text, View, ImageBackground, TouchableOpacity, Button, Image, TextInput, FlatList } from 'react-native';
        
        
        export default class App extends React.Component {
        
          constructor(props) {
            super(props)
            this.state = {
              showProgress: true,content: [] 
            }
          }
        
          componentDidMount() {
            return fetch('https://api.androidhive.info/feed/feed.json').then((response) => response.json()).then((responseData) => {
              this.setState({ showProgress: false,content: responseData.feed })
            })
          }
        
          render() {
            if (this.state.showProgress) {
              return (
                <View style={{ flex: 10, justifyContent: 'center', alignItems: 'center' }}>
                  <ActivityIndicator size="large" color="#0000ff" />
                </View>
              );
            }
            else {
              return (
                <View style={{ flex: 10, backgroundColor: '#d3d6db' }}>
                  <View style={{ flex: 1, borderRadius: 20, marginLeft: 10, marginRight: 10, marginTop: 10 }}>
                    <FlatList
                                    data={this.state.content}
                                    keyExtractor={(item, index) => index.toString()}
                      renderItem={({ item }) => <View style={{ flex: 1, marginBottom: 10, backgroundColor: '#d3d6db', justifyContent: 'center', alignItems: 'center' }}>
                        <TouchableOpacity style={{ flex: 1, width: '100%', height: 350, borderRadius: 5, backgroundColor: '#ffffff' }}>
                          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                            <Image
                              style={{ width: 50, height: 50, margin: 10 }}
                              source={{ uri: item.profilePic }}
                            />
                            <Text style={{ color: '#252525', fontWeight: 'bold' }}>{item.name}</Text>
                          </View>
                          <View style={{ flex: 3, justifyContent: 'flex-start' }}>
                            <Text style={{ color: '#252525', marginRight: 10, marginLeft: 10 }}>{item.status}</Text>
                            <Image
                              style={{ width: '100%', height: '70%', resizeMode: 'stretch' }}
                              source={{ uri: item.image }}
                            />
                          </View>
                        </TouchableOpacity>
                      </View>}
                    />
                  </View>
                </View>
              );
            }
          }
        }
        
        
        const styles = StyleSheet.create({
          container: {
            flex: 1,
            backgroundColor: '#fff',
            alignItems: 'center',
            justifyContent: 'center',
          },
        });

How to Add a Splash Screen to a React Native App.?

Onboarding in React Native App

Creating Login Screen in React Native App

Creating Facebook like Feed in React Native app

contact us

Kochi

Send us a Mail using the
form Below

How to Add a Splash Screen to a React Native App.?

SplashScreen.js

Onboarding in React Native App

Onboarding.js

Creating Login Screen in React Native App

login.js

Creating Facebook like Feed in React Native app

Facebook.js

contact us

Kochi

Send us a Mail using the form Below

Send us a Mail using the
form Below