TwitterUI Reactnative


TwitterUI_Reactnative project is a demonstration of building Twitter mobile app UI using Reactnative. It also helps you in best understanding of the basic features of reactnative. Please note that there is no backend integration in this project. Project uses Embedded Timelines feature and demonstartes UI of Twitter Android Mobile App. It mainly demonstrates -


  • Twitter timeline
  • Twitter profile menu
  • Twitter search box

ReactNative Features (Mainly)

  • StackNavigator, TabNavigator, DrawerNavigator : react-navigation
  • Header,Footer : native-base
  • TouchableNativeFeedback : react-native
  • ActionButton : react-native-action-button
  • RefreshControl : react-native
  • KeyboardAvoidingView : react-native
  • WebView nested in ScrollView, Dimensions, Platform : react-native
  • Entypo,Feather,FontAwesome,Ionicons,MaterialCommunityIcons of react-native-vector-icons

You can find implementation of all these feautures in .js files and are documented.

Twitter Embedded Timelines

Twitter Embedded Timelines are introduced by Twitter to embed (live feed) timelines into our app. You can check details of this at

Getting Started

Download this project to your local system. Open commandprompt and navigate to the project folder. Make sure you open Android emulator in your device. Use command "npm start" to run the project. After PackageManager is loaded select andriod emulator option to run app by pressing "a". You can now see app running in your emulator !!!



Install nvm and node
Install dependencies: npm install <Dependency> --save
Run Project : npm start
Output : Scan QR code by using Expo or press 'a' to run app on Android emulator

Working flow of project

App.js -> js/AppMain.js -> Home.js -> TabNavigator(Timeline.js,Search.js,Notification.js,Messages.js)-> TabBarComponent.js -> AppHeader.js
                                   -> DrawerNavigator(Home.js with content Profile.js)                                   ->SearchHeader.js
                                   -> StackNavigator(Homestack,SearchWindow.js)

Developed as part of Hasura


Bhavya Sruthi Sode

• Released: Oct 31, 2018, 09:52 PM

TwitterUI Reactnative

Author: bhavyasruthi
Item was Featured Author was Featured
Twitter Android mobile app frontend using Reactnative size
git clone