How To Create WhatsApp UI Clone In React Native?

Hello guys, In this example, we will see how you can create #Whastapp UI Clone in React Native app. It is very easy so let's start with it without wasting any time.




So first of all we need to create a fresh project using cli.
npx react-native init whatsAppUI
Go to the project directory.
cd whatsAppUI
After this, try to run that blank project on both iOS and android devices.
npx react-native run-ios  (mac only)
npx react-native run-android
If everything ok, you will see blank React Native app as shown in image.

Now, install required dependencies.
  • We need only UI so that's why we have to install UI library Native-Base using following command.
yarn add native-base
  • Now we need to link assets to the project using following command.
npx react-native link
After that we need to create app structure. Create a folder named as Screens in projects root directory.
Then add 4 screens js files within that folder and named them as:
  • calls.js
  • chats.js
  • status.js
  • settings.js
After that we need to add app styles globally so for that purpose add appStyles.js file in project root directory.
For better understanding, Check the projects folders/files structure screenshot below.
Now replace the code of following files.
  • App.js
import React, {Component} from 'react';
import {
  Container,
  Header,
  Title,
  Button,
  Right,
  Body,
  Icon,
  Text,
  Tabs,
  Tab,
  ScrollableTab,
  TabHeading,
  Badge,
} from 'native-base';
import ChatsScreen from './screens/chats';
import StatusScreen from './screens/status';
import CallsScreen from './screens/calls';
import {StatusBar} from 'react-native';
import appStyles from './appStyles';
import SettingsScreen from './screens/settings';
export default class App extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    setTimeout(() => {
      StatusBar.setBackgroundColor('#075E54');
    }, 100);
  }
  render() {
    return (
      <Container>
        <Header noLeft style={appStyles.headerBackgroundColor}>
          <Body>
            <Title style={appStyles.appTitle}>WhatsApp</Title>
          </Body>
          <Right>
            <Button icon transparent>
              <Icon type="MaterialIcons" name="search" />
            </Button>
            <Button icon transparent>
              <Icon type="MaterialIcons" name="more-vert" />
            </Button>
          </Right>
        </Header>
        <Tabs
          tabContainerStyle={{
            elevation: 0,
          }}
          renderTabBar={() => <ScrollableTab />}
          tabBarUnderlineStyle={appStyles.tabBarUnderLine}
          tabBarActiveTextColor="red"
          initialPage={3}
          tabBarBackgroundColor="#075E54">
          <Tab
            heading={
              <TabHeading style={{backgroundColor: '#075E54'}}>
                <Icon type="MaterialIcons" name="photo-camera" />
              </TabHeading>
            }>
            <Text
              style={{
                textAlign: 'center',
                textAlignVertical: 'center',
                flex: 1,
              }}>
              Camera Screen
            </Text>
          </Tab>
          <Tab
            heading={
              <TabHeading style={{backgroundColor: '#075E54'}}>
                <Text style={appStyles.tabsText}>CHATS</Text>
                <Badge style={appStyles.badge}>
                  <Text style={appStyles.badgeText}>2</Text>
                </Badge>
              </TabHeading>
            }>
            <ChatsScreen />
          </Tab>
          <Tab
            heading={
              <TabHeading style={{backgroundColor: '#075E54'}}>
                <Text style={appStyles.tabsText}>STATUS</Text>
              </TabHeading>
            }>
            <StatusScreen />
          </Tab>
          <Tab
            heading={
              <TabHeading style={{backgroundColor: '#075E54'}}>
                <Text style={appStyles.tabsText}>CALLS</Text>
              </TabHeading>
            }>
            <CallsScreen />
          </Tab>
          <Tab
            heading={
              <TabHeading style={{backgroundColor: '#075E54'}}>
                <Text style={appStyles.tabsText}>SETTINGS</Text>
              </TabHeading>
            }>
            <SettingsScreen />
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

  • chats.js
import React, {Component} from 'react';
import {
  ListItem,
  Left,
  Thumbnail,
  Body,
  Right,
  Content,
  Text,
  Badge,
  Container,
  Fab,
  Icon,
} from 'native-base';
import appStyles from '../appStyles';

export default class ChatScreen extends Component {
  render() {
    return (
      <Container>
        <Content>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/mauriolg/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Er Gulshan</Text>
              <Text note>How are you Harinder?</Text>
            </Body>
            <Right>
              <Text note style={{color: '#25D366'}}>
                3:43 pm
              </Text>
              <Badge style={appStyles.badgeChats}>
                <Text style={appStyles.badgeTextChats}>1</Text>
              </Badge>
            </Right>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/buddhasource/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Mohammad</Text>
              <Text note>How are you Harinder?</Text>
            </Body>
            <Right>
              <Text note style={{color: '#25D366'}}>
                3:43 pm
              </Text>
              <Badge style={appStyles.badgeChats}>
                <Text style={appStyles.badgeTextChats}>4</Text>
              </Badge>
            </Right>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/vicivadeline/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Brian</Text>
              <Text note>How are you Harinder?</Text>
            </Body>
            <Right>
              <Text note>3:43 pm</Text>
            </Right>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/naitanamoreno/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Michael</Text>
              <Text note>How are you Harinder?</Text>
            </Body>
            <Right>
              <Text note>3:43 pm</Text>
            </Right>
          </ListItem>
        </Content>
        <Fab style={appStyles.fabColor} position="bottomRight">
          <Icon type="MaterialIcons" name="chat" />
        </Fab>
      </Container>
    );
  }
}
  • status.js
import React, {Component} from 'react';
import {
  ListItem,
  Left,
  Thumbnail,
  Body,
  Content,
  Text,
  Container,
  Fab,
  Icon,
  Button,
} from 'native-base';
import appStyles from '../appStyles';
export default class StatusScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }
  render() {
    return (
      <Container>
        <Content>
          <ListItem avatar noBorder>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/matt3224/128.jpg',
                }}
              />
              <Icon
                type="MaterialIcons"
                name="add-circle"
                style={appStyles.addStatusIcon}
              />
            </Left>
            <Body>
              <Text>My Status</Text>
              <Text note>4 mintues ago</Text>
            </Body>
          </ListItem>
          <ListItem itemDivider style={appStyles.listItemDivider}>
            <Text note style={{fontSize: 12}}>
              Recent Updates
            </Text>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/naitanamoreno/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Mohammad</Text>
              <Text note>Today, 11:24 pm</Text>
            </Body>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/vicivadeline/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Brian</Text>
              <Text note>Today, 10:12 pm</Text>
            </Body>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/buddhasource/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Michael</Text>
              <Text note>Today, 10:00 pm</Text>
            </Body>
          </ListItem>
          <ListItem itemDivider style={appStyles.listItemDivider}>
            <Text note style={{fontSize: 12}}>
              Viewed Updates
            </Text>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/mauriolg/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Mohammad</Text>
              <Text note>Yesterday, 08:33 pm</Text>
            </Body>
          </ListItem>
        </Content>
        <Fab
          style={appStyles.fabColor}
          active={true}
          direction="up"
          position="bottomRight">
          <Icon type="MaterialIcons" name="photo-camera" />
          <Button style={{backgroundColor: '#F5F5F5'}}>
            <Icon type="MaterialIcons" name="edit" style={{color: '#075E54'}} />
          </Button>
        </Fab>
      </Container>
    );
  }
}
  • calls.js
import React, {Component} from 'react';
import {
  ListItem,
  Left,
  Thumbnail,
  Body,
  Right,
  Content,
  Text,
  Badge,
  Container,
  Fab,
  Icon,
} from 'native-base';
import appStyles from '../appStyles';
import {View} from 'react-native';
export default class CallsScreen extends Component {
  render() {
    return (
      <Container>
        <Content>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/buddhasource/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Mohammad</Text>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <Icon
                  type="MaterialIcons"
                  name="call-made"
                  style={[appStyles.callIcon, {color: '#25D366'}]}
                />
                <Text note>Yesterday, 08:23 pm</Text>
              </View>
            </Body>
            <Right>
              <Icon
                style={{color: '#075E54'}}
                type="MaterialIcons"
                name="call"
              />
            </Right>
          </ListItem>
          <ListItem avatar>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/buddhasource/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Mohammad</Text>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <Icon
                  type="MaterialIcons"
                  name="call-received"
                  style={[appStyles.callIcon, {color: '#FF0000'}]}
                />
                <Text note>Yesterday, 08:23 pm</Text>
              </View>
            </Body>
            <Right>
              <Icon
                style={{color: '#075E54'}}
                type="MaterialIcons"
                name="videocam"
              />
            </Right>
          </ListItem>
        </Content>
        <Fab style={appStyles.fabColor} position="bottomRight">
          <Icon type="MaterialIcons" name="phone-in-talk" />
        </Fab>
      </Container>
    );
  }
}
  • settings.js
import React, {Component} from 'react';
import {
  ListItem,
  Left,
  Thumbnail,
  Body,
  Content,
  Text,
  Container,
  Fab,
  Icon,
  Button,
  Separator,
} from 'native-base';
import appStyles from '../appStyles';
import {View} from 'react-native';
export default class SettingsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }
  render() {
    return (
      <Container>
        <Content>
          <ListItem avatar noBorder>
            <Left>
              <Thumbnail
                source={{
                  uri:
                    'https://s3.amazonaws.com/uifaces/faces/twitter/matt3224/128.jpg',
                }}
              />
            </Left>
            <Body>
              <Text>Er Harinder Singh</Text>
              <Text note>Urgent Calls Only</Text>
            </Body>
          </ListItem>
          <Separator style={{marginTop: 15, height: 1}}></Separator>
          <ListItem icon noBorder style={{marginTop: 20}}>
            <Left>
              <Button transparent>
                <Icon
                  type="MaterialIcons"
                  name="vpn-key"
                  style={{color: '#128C7E', opacity: 0.6}}
                />
              </Button>
            </Left>
            <Body>
              <Text>Account</Text>
              <Text note>Privacy, security, change number</Text>
            </Body>
          </ListItem>
          <ListItem icon noBorder style={{marginTop: 20}}>
            <Left>
              <Button transparent>
                <Icon
                  type="MaterialIcons"
                  name="chat"
                  style={{color: '#128C7E', opacity: 0.6}}
                />
              </Button>
            </Left>
            <Body>
              <Text>Chats</Text>
              <Text note>Theme, wallpapers, chat history</Text>
            </Body>
          </ListItem>
          <ListItem icon noBorder style={{marginTop: 20}}>
            <Left>
              <Button transparent>
                <Icon
                  type="MaterialIcons"
                  name="notifications"
                  style={{color: '#128C7E', opacity: 0.6}}
                />
              </Button>
            </Left>
            <Body>
              <Text>Notifications</Text>
              <Text note>Message, group & call tones</Text>
            </Body>
          </ListItem>
          <ListItem icon noBorder style={{marginTop: 20}}>
            <Left>
              <Button transparent>
                <Icon
                  type="MaterialIcons"
                  name="data-usage"
                  style={{color: '#128C7E', opacity: 0.6}}
                />
              </Button>
            </Left>
            <Body>
              <Text>Data and storage usage</Text>
              <Text note>Network usage, auto-download</Text>
            </Body>
          </ListItem>
          <ListItem icon style={{marginTop: 20}} noBorder>
            <Left>
              <Button transparent>
                <Icon
                  type="MaterialIcons"
                  name="help-outline"
                  style={{color: '#128C7E', opacity: 0.6}}
                />
              </Button>
            </Left>
            <Body>
              <Text>Help</Text>
              <Text note>FAQ, contact us, privacy policy</Text>
            </Body>
          </ListItem>
          <ListItem icon noBorder style={{marginTop: 20}}>
            <Left>
              <Button transparent>
                <Icon
                  type="MaterialIcons"
                  name="people"
                  style={{color: '#128C7E', opacity: 0.6}}
                />
              </Button>
            </Left>
            <Body>
              <Text>Invite a friend</Text>
            </Body>
          </ListItem>
          <View style={{flex: 1, alignSelf: 'center', marginTop: 20}}>
            <Text note style={{textAlign: 'center'}}>
              from
            </Text>
            <Text
              style={{
                textAlign: 'center',
                fontWeight: 'bold',
                color: '#4267B2',
              }}>
              FACEBOOK
            </Text>
          </View>
        </Content>
      </Container>
    );
  }
}
  • appStyles.js
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
  //Common Style
  appTitle: {
    fontSize: 22,
    color: 'snow',
  },
  headerBackgroundColor: {
    backgroundColor: '#075E54',
  },
  // Tabs
  tabBarUnderLine: {
    height: 2,
  },
  badge: {
    backgroundColor: '#ECE5DD',
    justifyContent: 'center',
    textAlign: 'center',
    alignSelf: 'center',
    height: 24,
  },
  badgeText: {
    color: '#075E54',
    fontSize: 12,
  },
  tabsText: {fontSize: 14, fontWeight: 'bold'},
  //Chat Screen
  badgeChats: {
    backgroundColor: '#25D366',
    justifyContent: 'center',
    textAlign: 'center',
    alignSelf: 'center',
    height: 24,
    marginTop: 4,
  },
  badgeTextChats: {
    color: 'snow',
    fontSize: 12,
  },
  fabColor: {
    backgroundColor: '#25D366',
  },
  // Status Screen
  listItemDivider: {marginTop: 10, height: 10},
  addStatusIcon: {
    color: '#25D366',
    alignSelf: 'flex-end',
    position: 'absolute',
    marginLeft: 40,
    bottom: -5,
    width: 20,
    fontSize: 20,
  },
  // Call Screen
  callIcon: {
    marginRight: 10,
    fontSize: 18,
  },
});
NOW, Save everything and run the project again by using following commands. 
npx react-native run-ios  (mac only)
npx react-native run-android
You will see your WhatsApp UI Clone app is ready and showing in the simulators (or devices). Output images are attached and link to the video of the project's coding as given below.
         
I hope you like the article regarding WhatsApp UI Clone as documents in React Native. If you have any questions or you want to get a tutorial on some topic, you can comment below.
There will be more posts coming soon. Stay tuned! Bye. 🙂

Post a Comment

0 Comments