How To Create Odoo Home Page In React Native

Rahul Saini

27 December 2024

In this blog, we will learn how to create an Odoo Home Page in React Native.

Introduction

Creating an Odoo home page in React Native can boost user engagement and accessibility. This guide will walk you through building the home page with clear explanations and code examples.

Implementation

Now we will implement the Odoo Home Page, step by step.

Setting Up Your Project with React Native

For setting up the environment, check out our blog, Getting started with React Native, where we walk through the entire setup process.

Create the Home Page Component

We’ll start by creating a file named Home.tsx in the src/screens/HomePage folder.

The Home component fetches categories, banners, and sales data from APIs and displays them using custom components. It uses useEffect to load data and renders it within a scrollable view.

Please check this blog on how to implement API in React Native.

import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, Dimensions } from 'react-native'
import FlatListMajor from '../../components/FlatListMajor';
import CustomFlatList from './components/CustomFlatList';
import styles from './styles';
import CustomImageSlider from './components/CustomImageSlider';
import { getBannerData, getBannerGroup2Data, getCategoryData, getFeatureCategory2Data, getSalesData } from '../../data/data';

const Home = () => {
    const [categories, setCategories] = useState()
    const [banner, setBanner] = useState([])
    const [feature, setFeature] = useState([])
    const [sales, setSales] = useState([])
    const [bannerGroup, setBannerGroup] = useState([])
    
    useEffect(() => {
        getCategoryData.then((res) => setCategories(res));
        getBannerData.then((res) => setBanner(res));
        getFeatureCategory2Data.then((res) => setFeature(res));
        getSalesData.then((res) => setSales(res));
        getBannerGroup2Data.then((res) => setBannerGroup(res));
    }, [categories, banner, feature, sales, bannerGroup]);
    

    
    return (
        <ScrollView>
        <View style={styles.homeContainer}>
            {/* Feature Category */}
            <View>
                <Text style={styles.titleStyle}>Feature Category 1</Text>
                <CustomFlatList data={categories} />
            </View>

            {/* Banner */}
            <View>
                <CustomImageSlider data={banner} />
            </View>

            {/* Deals of the day  */}
            <View style={styles.viewMargin}>
                <Text style={styles.titleStyle}>Feature Category 2</Text>
                <CustomFlatList data={feature} borderRadius={30} />
            </View>
            {/* Sales */}
            <View style={styles.viewMargin}>
                <Text style={styles.titleStyle}>Sales</Text>
                <FlatListMajor data={sales} />
            </View>

            {/* Image Slider */}
            <View>
                <CustomImageSlider data={bannerGroup} />
            </View>

        </View>
        </ScrollView>

    )
};

export default Home;

import React, { useEffect, useState } from 'react';

import { View, Text, ScrollView, Dimensions } from 'react-native'

import FlatListMajor from '../../components/FlatListMajor';

import CustomFlatList from './components/CustomFlatList';

import styles from './styles';

import CustomImageSlider from './components/CustomImageSlider';

import { getBannerData, getBannerGroup2Data, getCategoryData, getFeatureCategory2Data, getSalesData } from '../../data/data';

const Home = () => {

const [categories, setCategories] = useState()

const [banner, setBanner] = useState([])

const [feature, setFeature] = useState([])

const [sales, setSales] = useState([])

const [bannerGroup, setBannerGroup] = useState([])

useEffect(() => {

getCategoryData.then((res) => setCategories(res));

getBannerData.then((res) => setBanner(res));

getFeatureCategory2Data.then((res) => setFeature(res));

getSalesData.then((res) => setSales(res));

getBannerGroup2Data.then((res) => setBannerGroup(res));

}, [categories, banner, feature, sales, bannerGroup]);

return (

{/* Feature Category */}

<View>

<Text style={styles.titleStyle}>Feature Category 1</Text>

</View>

{/* Banner */}

<View>

</View>

{/* Deals of the day */}

<Text style={styles.titleStyle}>Feature Category 2</Text>

</View>

{/* Sales */}

<Text style={styles.titleStyle}>Sales</Text>

</View>

{/* Image Slider */}

<View>

</View>

</ScrollView>

)

};

export default Home;

2. CustomFlatList

The CustomFlatList component shows a horizontal list with dynamic image sizes, border radius, and category names via the Item component.

import React from 'react';
import { View, Text, FlatList, Image } from 'react-native';
import styles from '../styles';
const Item = ({ data, imageWidth, imageHeight, borderRadius }) => (
    <View style={styles.itemView}>
        <Image
            source={{ uri: data.url }}
            style={[styles.imageStyle, { width: imageWidth, height: imageHeight, borderRadius: borderRadius }]}
        />
        <Text style={styles.textStyle}>{data.categoryName}</Text>
    </View>
);

const CustomFlatList = ({ data, imageWidth = 60, imageHeight = 60, borderRadius = 10 }) => {
    return (
        <View style={styles.itemViewContainer}>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={data}
                renderItem={({ item }) => (
                    <Item 
                        data={item} 
                        imageWidth={imageWidth} 
                        imageHeight={imageHeight} 
                        borderRadius={borderRadius} 
                    />
                )}
            />
        </View>
    );
};

export default CustomFlatList;

import React from 'react';

import { View, Text, FlatList, Image } from 'react-native';

import styles from '../styles';

const Item = ({ data, imageWidth, imageHeight, borderRadius }) => (

<Image

source={{ uri: data.url }}

style={[styles.imageStyle, { width: imageWidth, height: imageHeight, borderRadius: borderRadius }]}

<Text style={styles.textStyle}>{data.categoryName}</Text>

</View>

);

const CustomFlatList = ({ data, imageWidth = 60, imageHeight = 60, borderRadius = 10 }) => {

return (

<FlatList

horizontal

showsHorizontalScrollIndicator={false}

data={data}

renderItem={({ item }) => (

<Item

data={item}

imageWidth={imageWidth}

imageHeight={imageHeight}

borderRadius={borderRadius}

)}

</View>

);

};

export default CustomFlatList;

3. CustomImageSlider

The CustomImageSlider formats URLs and displays images in an auto-playing carousel with custom styling and indicators. It uses the ImageSlider component for slider functionality.

import React from 'react';
import { View } from 'react-native'
import { ImageSlider } from "react-native-image-slider-banner";
import styles from '../styles';

const CustomImageSlider = ({data}) => {
    console.log("\n\n\n BannerData",data)
    const formattedData = data.map(url => ({ img: url }));
    console.log("\n\n\n formatedData",formattedData)
    return (
        <View>
            <ImageSlider
                data={formattedData}
            
                autoPlay={true}
                timer={1500}
                closeIconColor="#fff"
                caroselImageContainerStyle={styles.carouselImageContainerStyle}
                indicatorContainerStyle={styles.indicatorContainerStyle}
                activeIndicatorStyle={styles.activeIndicatorStyle}
                inActiveIndicatorStyle={styles.inActiveIndicatorStyle}
                />
        </View>
    )
}

export default CustomImageSlider;

import React from 'react';

import { View } from 'react-native'

import { ImageSlider } from "react-native-image-slider-banner";

import styles from '../styles';

const CustomImageSlider = ({data}) => {

console.log("\n\n\n BannerData",data)

const formattedData = data.map(url => ({ img: url }));

console.log("\n\n\n formatedData",formattedData)

return (

<View>

<ImageSlider

data={formattedData}

autoPlay={true}

timer={1500}

closeIconColor="#fff"

caroselImageContainerStyle={styles.carouselImageContainerStyle}

indicatorContainerStyle={styles.indicatorContainerStyle}

activeIndicatorStyle={styles.activeIndicatorStyle}

inActiveIndicatorStyle={styles.inActiveIndicatorStyle}

</View>

)

}

export default CustomImageSlider;

4. FlatListMajor

The FlatListMajor shows a horizontal list with images, names, prices, and cart icons for each item. It uses FlatList to render items dynamically with custom styles.

import React from 'react';
import { View, Text, FlatList, Image, StyleSheet } from 'react-native'
import styles from '../styles';

const Item = ({data}) => (
    <View style={styles.itemViewMedium}>
        <View style={{backgroundColor:'white', padding:10}}>
      <Image source={{ uri: data.thumbNail }} style={styles.imageStyleMedium}/>
      <View style={{flexDirection:'row', justifyContent: 'space-between',marginTop:10}}>
        <View>
         <Text style={{fontSize:12}}>{data.name}</Text>
         <Text style={styles.textStyleMedium}>{data.priceUnit}</Text>
        </View>
        <View style={{justifyContent: 'center', alignItems: 'center'}}>
        <Image source={require('../../../assets/images/cart.png')} style={{width:24, height:24}}/>
        </View>
      </View>
        </View>
    </View>
    
  );

const FlatListMajor = ({data}) =>{
    
    console.log(`\n\n\n major = ${data}`)
    return(
        <View style={{marginTop:10}}>
            <FlatList
             horizontal
             showsHorizontalScrollIndicator={false}
             data={data}
             renderItem={({item}) => <Item data={item} />}
            />
        </View>
    )
};

export default FlatListMajor;

import React from 'react';

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

import styles from '../styles';

const Item = ({data}) => (

<View>

<Text style={styles.textStyleMedium}>{data.priceUnit}</Text>

</View>

</View>

);

const FlatListMajor = ({data}) =>{

console.log(`\n\n\n major = ${data}`)

return(

<FlatList

horizontal

showsHorizontalScrollIndicator={false}

data={data}

renderItem={({item}) => <Item data={item} />}

</View>

)

};

export default FlatListMajor;

5. Style

This file defines styles for the home screen, including layouts for containers, text, images, carousels, and FlatList items. It customizes dimensions, colors, and indicators.

import { StyleSheet, Dimensions } from 'react-native'
import { INDICATOR_COLOR, WHITE } from '../../theme/colors'

export default StyleSheet.create({
    homeContainer:{
        padding:8
    },
    viewMargin:{
        marginTop:10
    },
    titleStyle: {
        fontSize: 13,
        fontWeight: 'bold',
        color: 'black'
    },
    carousel: {
        flexGrow: 0,
        height: 170,
       },
       imageStyle:{
        height:170,
        width:Dimensions.get('window')
    
    },
    titleStyle1: {
        fontSize: 13,
        fontWeight: 'bold',
        color: 'black'
    },
    carouselImageContainerStyle:{
        marginBottom:20, 
        backgroundColor:'white',
    },
    indicatorContainerStyle:{
        backgroundColor:'white',
    },
    activeIndicatorStyle:{
        width:12,
        height:12,
        backgroundColor: WHITE,
        borderWidth:3,
        borderColor: INDICATOR_COLOR

    },
    inActiveIndicatorStyle:{
        width:6,
        height:6,
        backgroundColor: INDICATOR_COLOR
    },
    itemView: {
        marginEnd: 20,
        elevation: 20,
    },
    itemViewContainer: {
        marginTop: 10,
    },
    imageStyle: {
        borderWidth: 0.5,
        borderColor: 'skyblue',
    },
    textStyle: {
        fontSize: 10,
        fontWeight: 'bold',
        color: 'black',
        marginStart: 5,
    },
    itemViewMedium:{
        width: 150,
        marginEnd:10,
        backgroundColor:CARD_BACKGROUND,
        padding:2
    },
    imageStyleMedium:{
        width:100, 
        height:100,
        
    },
    textStyleMedium:{
        fontSize:10,
        fontWeight:'bold',
        color:'black',
    }
})

import { StyleSheet, Dimensions } from 'react-native'

import { INDICATOR_COLOR, WHITE } from '../../theme/colors'

export default StyleSheet.create({

homeContainer:{

padding:8

viewMargin:{

marginTop:10

titleStyle: {

fontSize: 13,

fontWeight: 'bold',

color: 'black'

carousel: {

flexGrow: 0,

height: 170,

imageStyle:{

height:170,

width:Dimensions.get('window')

titleStyle1: {

fontSize: 13,

fontWeight: 'bold',

color: 'black'

carouselImageContainerStyle:{

marginBottom:20,

backgroundColor:'white',

indicatorContainerStyle:{

backgroundColor:'white',

activeIndicatorStyle:{

width:12,

height:12,

backgroundColor: WHITE,

borderWidth:3,

borderColor: INDICATOR_COLOR

inActiveIndicatorStyle:{

width:6,

height:6,

backgroundColor: INDICATOR_COLOR

itemView: {

marginEnd: 20,

elevation: 20,

itemViewContainer: {

marginTop: 10,

imageStyle: {

borderWidth: 0.5,

borderColor: 'skyblue',

textStyle: {

fontSize: 10,

fontWeight: 'bold',

color: 'black',

marginStart: 5,

itemViewMedium:{

width: 150,

marginEnd:10,

backgroundColor:CARD_BACKGROUND,

padding:2

imageStyleMedium:{

width:100,

height:100,

textStyleMedium:{

fontSize:10,

fontWeight:'bold',

color:'black',

}

})

Integrate the Home Page into Your App

Now integrate the Home component into your App.tsx file.

Open App.tsx : Replace the existing code with:

import React from 'react';
import Home from './src/screens/HomePage/Home';
import { View } from 'react-native';
const App = () => {
    return(
        <View>
            <Home/>
        </View>
    )
}

export default App;

import React from 'react';

import Home from './src/screens/HomePage/Home';

import { View } from 'react-native';

const App = () => {

return(

<View>

<Home/>

</View>

)

}

export default App;

Now save or reload your React Native App to view changes.

Here is the Output of the project

Create Odoo Home Page In React Native

Creating an Odoo home page in React Native involves building a responsive layout to display products, categories, and Sales.

Conclusion

In conclusion, creating an Odoo Home Page in React Native involves categories, banners, and product highlights, with reusable components and efficient API handling for a dynamic interface.

Thanks for reading this blog.

Please check my other blogs here.