Starting with React Native UI Design

React Native is a popular framework for building cross-platform mobile applications using JavaScript. It allows developers to create native-like apps for both Android and iOS using a single codebase. One important aspect of app development is designing the user interface (UI). React native use React and JavaScript(or Typescript) and you can use inline CSS like syntax to create UI. React Native is backed by Facebook and it's gaining it's popularity in recent years. In this blog I have added basics you need to learn before creating UI with react-native.

Feature of react native design system

1. Use Flexbox for layout: Flexbox is a layout system that helps you align and distribute space among elements in your app. It is the default layout system in React Native and is very easy to use. You can use it to create complex layouts by nesting elements and specifying their size, position, and other styling properties. For example, the following code uses Flexbox to create a horizontal list of items:
   

     import { View, Text } from 'react-native';
   
     const MyList = () => (
       <View style={{ flexDirection: 'row' }}>
         <Text style={{ flex: 1 }}>Item 1</Text>
         <Text style={{ flex: 1 }}>Item 2</Text>
         <Text style={{ flex: 1 }}>Item 3</Text>
       </View>
     );
   

2. Use a style guide: A style guide is a set of rules and guidelines for designing the UI of your app. It helps ensure that all elements in your app have a consistent look and feel. A style guide can include things like color palettes, typography, and layout patterns. For example, you might create a style guide that defines a primary color for your app, and use that color for buttons and other interactive elements.

3. Use platform-specific styles: React Native allows you to specify styles that are specific to either Android or iOS. This is useful if you want to ensure that your app has a native look and feel on each platform. You can do this by using the Platform module and the Platform.OS property. For example, the following code uses platform-specific styles to create a button that looks native on both Android and iOS:
   

   import { View, Text, Platform, TouchableOpacity } from 'react-native';
   
   const MyButton = () => (
     <TouchableOpacity
       style={{
         backgroundColor: Platform.OS === 'ios' ? '#007AFF' : '#3F51B5',
         padding: 10,
         borderRadius: 5,
       }}
     >
       <Text style={{ color: 'white', fontWeight: 'bold' }}>Click me</Text>
     </TouchableOpacity>
   );
   
   

4. Use reusable components: One of the benefits of using React Native is that you can create reusable components that can be used throughout your app. This helps you avoid repeating code and makes it easier to maintain your UI. For example, you might create a Card component that can be used to display information in a consistent way throughout your app.

5. Test on multiple devices: It's important to test your app on a variety of devices to ensure that it looks and functions as expected. This will help you catch any layout or styling issues that may arise on different screen sizes and resolutions. For example, you might test your app on both a small phone and a large tablet to ensure that it looks good on both types of devices.

Moving From HTML/CSS to React Native UI Design

1. Styling: In HTML/CSS, you use stylesheets to apply styling to your elements. In React Native, you use a separate style prop for each element. The style prop is an object that accepts a variety of styling properties, such as fontSize, color, and margin. For example:
   

   import { View, Text } from 'react-native';
   
   const MyComponent = () => (
   <View style={{ alignItems: 'center', marginTop: 20 }}>
       <Text style={{ fontSize: 20, color: 'red' }}>Hello, world!</Text>
   </View>
   );
   
   

2. Layout: In HTML/CSS, you use layout techniques such as floats and positioning to arrange elements on the page. In React Native, you can use Flexbox or the absolute position property to lay out your elements. For example, the following code uses Flexbox to create a vertical list of items:
   

   import { View, Text } from 'react-native';
   
   const MyList = () => (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ flex: 1 }}>Item 1</Text>
       <Text style={{ flex: 1 }}>Item 2</Text>
       <Text style={{ flex: 1 }}>Item 3</Text>
   </View>
   );
   

3. Navigation: In HTML/CSS, you use hyperlinks to navigate between pages. In React Native, you can use the react-navigation library to handle navigation between screens. For example, the following code uses the createStackNavigator function to create a stack of screens with a header:
   

   import * as React from 'react';
   import { NavigationContainer } from '@react-navigation/native';
   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator();
   
   function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Profile" component={ProfileScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   }
   
   

4. Data handling: In HTML/CSS, you can use Ajax requests or the fetch API to retrieve data from a server. In React Native, you can use the fetch API or a library such as axios to make HTTP requests. For example, the following code uses fetch to retrieve data from a JSON API:
   

   import React, { useState, useEffect } from 'react';
   import { View, Text } from 'react-native';
   
   const MyComponent = () => {
   const [data, setData] = useState(null);
   
   useEffect(() => {
       fetch('https://my-json-api.com/data')
       .then((response) => response.json())
       .then((json) => setData(json))
       .catch((error) => console.error(error));
   }, []);
   
   if (!data) {
       return <Text>Loading...</Text>;
   }
   
   return (
       <View>
       <Text>{data.title}</Text>
       <Text>{data.description}</Text>
       </View>
   );
   };