Skip to main content

Posts

Showing posts from October, 2018

Create Grid using React native

After fist post about react native I feel I'm getting familiar with react native, this framework quite easy to use, today I continue with another tutorial about create a simple grid card in react native. Let see the our final result first:                             Let's start... Analytics Assump our data has below structure: We have an array of rows and each row has an array of columns, then I decided to use FlatList to display object in cloumns array in horizontal direction, you can imaging like below image. Gridcard design Card Item each card has a logo and a text. I'm using the Icon from lib react-native-vector-icons To have a flatlist in horizontal we use  horizontal = {true} property, and to make sure the width of flatlist is same as screen with we use  contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }} Grid Now the implementation quite easy now, just need to...

My first React native app - Simple weather app

I'm learning the react native and today I'll write a post about my first app - Simple weather app (from a to z) to apply what I have learned. source https://github.com/jbohnvn/reactnative I'm a window and android boy so this tutorial only run with android, so if you guys can run it on iOS please comment, then other people can get it as an example as well. Requirements: - Familiar with JavaScript and React - Nodejs, Android SDK installed on your local machine - VSCode is using (but you can use any other IDE or editor) - Having  Weather API - OpenWeatherMap account for get API KEY ...let's start Creating a new project Use the react native command line interface to generate a new React Native project npm install -g react-native-cli react-native init AwesomeProject cd AwesomeProject react-native run-android Make sure you installed android build version defined in SimpleWeather/android/build.gradle  ext {         buildToolsVersion = "2...