How To Create Odoo Product Page In React Native

Rahul Saini

8 October 2024

In this blog, we will learn how to create an odoo product page in React Native.

Introduction

Creating an Odoo product page in React Native can make the difference between a user buying your product or moving on. This guide shows you how to build the product page with code examples and explanations.

Implementation

Now we will implement the product page, step by step.

Setting Up Your Product Page with React Native

1. Create Your React Native Project:

Open your terminal and type the command below to create a new project.

1	npx react-native init ProductPageApp

2. Navigate to Your Project Directory:

Navigate to the project directory where App.js and other necessary files are located.

1	cd ProductPageApp

3. Run Your App:

Run the command below to start your project on Android or iOS.

1 2	npx react-native run-android // For Android npx react-native run-ios // For iOS

Create the Product Page Component

We’ll start by creating a file named ProductPage.js in the src/components folder.

Here’s a basic example of what your ProductPage.js might look like:

import React, {useEffect, useState} from "react";
import {Text, View,StyleSheet, Image, ScrollView, TouchableOpacity } from "react-native"
import Collapsible from 'react-native-collapsible';

const ProductPage = () => {
  const [productName, setProductName] = useState()
  const [price, setPrice] = useState()
  const [rating, setRating] = useState()
  const [review, setReview] = useState()
  const [image, setImage] = useState()
  const [details, setDetails] = useState("A customizable desk provides a versatile and tailored workspace by offering adjustable and modular features to meet individual preferences and needs. Key aspects include height adjustment capabilities, which allow users to switch between sitting and standing positions for ergonomic comfort. Modular components such as drawers, shelves, and monitor mounts can be added or removed to suit various tasks and storage requirements. Users also have options for different surface materials and finishes, enabling them to match their desk to personal style or office decor.")

// Function to make the API request
  const postData = () => {
    fetch('https://your.api.here/user')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log('Response Data:', data.name);
      setProductName(data.name)
      setPrice(data.priceUnit)
      setRating(data.avg_rating)
      setReview(data.total_review)
      setImage(data.images[0])
    })
    .catch(error => {
      console.error('Response Error:', error);
    });
  };

useEffect(() => {
    postData();
  }, []);

const [counter, setCounter] = useState(1)
  const [unit, setUnit] = useState("Unit")
  const [collapsed, setCollapsed] = useState(true)
  const toggle = ()=>{
      setCollapsed(!collapsed)
  }

const decrement = ()=>{
    if(counter>1){
      setCounter(counter=>counter-1)
    }
  }

const increment = ()=>{
    setCounter(counter=>counter+1)
  }

return(
        <ScrollView
      style={{
        backgroundColor: '#E5E4E2',
      }} showsVerticalScrollIndicator={false}>

{/* Image View */}
      <View style={{ backgroundColor: 'white', height: 350 }}>
        
      <Image source={{uri:image}} 
      style={{height:350, width:'100%'}}/> 
      </View>

{/* Product Info View */}
      <View style={{ backgroundColor: 'white',paddingStart:10}}>
        <Text style={[styles.textStyle, styles.boldStyle]}>{productName}</Text>
        <Text style={styles.textStyle}>{price}</Text>
        <View style={{flexDirection:'row',  marginTop: 10, }}>

{rating!=0
          ?<View style={styles.ratingBox}>
            <Text style={{ color: 'white', fontSize: 10 }}>{rating}</Text>
            <Image source={require('../../assets/images/star.png')} style={{width:12, height:12}}/>
          </View>
          :null}
          
          {review!=0
          ?<Text style={{fontSize:12, marginStart: 10, fontWeight: 'bold', color: 'black'}}>{review} Reviews</Text>
          :<View><Text style={{fontSize: 12}}>No Review Yet</Text></View>}

<Text style={{fontSize:12, marginStart: 10, color: 'skyblue'}}>ADD YOUR REVIEW</Text>
        </View>
        <View style={{height:20}}></View>
      </View>

{/* WishList and Share View */}
      <View style={styles.viewStyle}>
        <View style={styles.box}>
        <Image source={require('../../assets/images/fav.png')} style={{width:20, height:20}} />  
        <Text style={styles.wishlistText}>WISHLIST</Text>
        </View>
        <View style={styles.box}>
        <Image source={require('../../assets/images/share.png')} style={{width:20, height:20}} />
        <Text style={styles.wishlistText}>SHARE</Text>
        </View>
      </View>

{/* Quantity View */}
      <View style={{padding:10, marginTop:10,backgroundColor:'white'}}>
        <Text style={{fontSize:15, color:'#C0C0C0'}}>Quantity</Text>
      </View>

{/* Counter View */}
      <View style={styles.counterView}>
        <TouchableOpacity style={styles.counterPadding} onPress={decrement}>
          <Text style={{color: 'white', fontSize:30}}>-</Text>
        </TouchableOpacity >
        <View style={{flex:15, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontWeight: 'bold'}}>{counter} Units</Text>
        </View>
        <TouchableOpacity style={styles.counterPadding} onPress={increment}>
          <Text style={{color: 'white', fontSize:30}}>+</Text>
        </TouchableOpacity>
      </View>

{/* Add to cart and Buy button View */}
      <View style={{flex:1, flexDirection: 'row',backgroundColor: 'white', padding:5, marginTop: 7}}>
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center', borderWidth:1, borderRadius:5, padding:10, marginEnd: 5}}>
          <Text style={{color: 'black',fontWeight: 'bold'}}> ADD TO CART</Text>
        </View>
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black', borderRadius: 5, marginStart: 5}}>
          <Text style={{color: 'white', fontWeight: 'bold'}}>BUY NOW</Text>
        </View>
      </View>

{/* Details View */}
      <View style={{padding:10, marginTop:7,backgroundColor:'white',flexDirection: 'row', flex:1, justifyContent: 'space-between'}} 
      onStartShouldSetResponder={toggle}>
        <Text style={{fontSize:15, color:'#C0C0C0'}}>Details</Text>
        {collapsed?<Image source={require('../../assets/images/bottom_arrow.png')} style={{width: 30, height: 30}} />:null}
      </View>

{/* Collapsible View */}
      <Collapsible collapsed={collapsed}>
        <View style={{backgroundColor: 'white', padding: 5}}>
          <Text style={{color: 'black', marginBottom: 10}}> {details} </Text>
        </View>
      </Collapsible>

{/* Reviews View */}
      <View style={{padding:10, marginTop:10,backgroundColor:'white',flexDirection: 'row', flex:1, justifyContent: 'space-between'}} 
      onStartShouldSetResponder={()=>console.log("review")}>
        <Text style={{fontSize:20, color:'black', fontWeight: 'bold'}}>Reviews (1)</Text>
        <Image source={require('../../assets/images/arrow_right.png')} style={{width: 30, height: 30}} />
      </View>
    </ScrollView>
    )
};

// Styling part
const styles = StyleSheet.create({
    viewStyle: {
      color: 'white',
      width: 200,
      height: 200,
    },
    textStyle: {
      color: 'black',
      marginTop: 5,
    },
    ratingBox: {
      flexDirection: 'row',
      backgroundColor: 'green',
      justifyContent: 'center',
      width: 40,
      padding: 2,
      alignItems: 'center',
    },
    box:{
      flex:0.5, 
      flexDirection:'row',
      justifyContent:'center',
      alignItems:'center', 
      backgroundColor:'white',
      padding:10
    },
    viewStyle:{
      flex:1, 
      flexDirection:'row', 
      backgroundColor:'white',
      marginTop:1
    },
    wishlistText:{
      marginStart:5,
      color: 'black'
    },
    boldStyle:{
      fontWeight: "bold"
    },
    counterView:{
      flex:10,
      flexDirection: 'row',
      paddingTop: 10,
      paddingStart: 5,
      paddingBottom: 10,
      paddingEnd: 5,
      backgroundColor: 'white',
      marginTop: 1
    },
    counterPadding:{
      flex:1,
      paddingTop: 1,
      paddingStart: 20,
      paddingBottom: 1,
      paddingEnd: 20,
      backgroundColor: 'black',
      borderRadius: 5,
      justifyContent: 'center',
      alignItems: 'center'
    }
  });

export default ProductPage;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

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

import {Text, View,StyleSheet, Image, ScrollView, TouchableOpacity } from "react-native"

import Collapsible from 'react-native-collapsible';

const ProductPage = () => {

const [productName, setProductName] = useState()

const [price, setPrice] = useState()

const [rating, setRating] = useState()

const [review, setReview] = useState()

const [image, setImage] = useState()

const [details, setDetails] = useState("A customizable desk provides a versatile and tailored workspace by offering adjustable and modular features to meet individual preferences and needs. Key aspects include height adjustment capabilities, which allow users to switch between sitting and standing positions for ergonomic comfort. Modular components such as drawers, shelves, and monitor mounts can be added or removed to suit various tasks and storage requirements. Users also have options for different surface materials and finishes, enabling them to match their desk to personal style or office decor.")

// Function to make the API request

const postData = () => {

fetch('https://your.api.here/user')

.then(response => {

if (!response.ok) {

throw new Error('Network response was not ok');

}

return response.json();

})

.then(data => {

console.log('Response Data:', data.name);

setProductName(data.name)

setPrice(data.priceUnit)

setRating(data.avg_rating)

setReview(data.total_review)

setImage(data.images[0])

})

.catch(error => {

console.error('Response Error:', error);

});

};

useEffect(() => {

postData();

}, []);

const [counter, setCounter] = useState(1)

const [unit, setUnit] = useState("Unit")

const [collapsed, setCollapsed] = useState(true)

const toggle = ()=>{

setCollapsed(!collapsed)

}

const decrement = ()=>{

if(counter>1){

setCounter(counter=>counter-1)

}

const increment = ()=>{

setCounter(counter=>counter+1)

}

return(

<ScrollView

style={{

backgroundColor: '#E5E4E2',

}} showsVerticalScrollIndicator={false}>

{/* Image View */}

<Image source={{uri:image}}

style={{height:350, width:'100%'}}/>

</View>

{/* Product Info View */}

<Text style={[styles.textStyle, styles.boldStyle]}>{productName}</Text>

<Text style={styles.textStyle}>{price}</Text>

{rating!=0

?<View style={styles.ratingBox}>

<Text style={{ color: 'white', fontSize: 10 }}>{rating}</Text>

</View>

:null}

{review!=0

?<Text style={{fontSize:12, marginStart: 10, fontWeight: 'bold', color: 'black'}}>{review} Reviews</Text>

:<View><Text style={{fontSize: 12}}>No Review Yet</Text></View>}

<Text style={{fontSize:12, marginStart: 10, color: 'skyblue'}}>ADD YOUR REVIEW</Text>

</View>

</View>

{/* WishList and Share View */}

<Text style={styles.wishlistText}>WISHLIST</Text>

</View>

<Text style={styles.wishlistText}>SHARE</Text>

</View>

{/* Quantity View */}

<Text style={{fontSize:15, color:'#C0C0C0'}}>Quantity</Text>

</View>

{/* Counter View */}

</TouchableOpacity >

<Text style={{fontWeight: 'bold'}}>{counter} Units</Text>

</View>

</TouchableOpacity>

</View>

{/* Add to cart and Buy button View */}

</View>

</View>

{/* Details View */}

<View style={{padding:10, marginTop:7,backgroundColor:'white',flexDirection: 'row', flex:1, justifyContent: 'space-between'}}

onStartShouldSetResponder={toggle}>

<Text style={{fontSize:15, color:'#C0C0C0'}}>Details</Text>

{collapsed?<Image source={require('../../assets/images/bottom_arrow.png')} style={{width: 30, height: 30}} />:null}

</View>

{/* Collapsible View */}

<Text style={{color: 'black', marginBottom: 10}}> {details} </Text>

</View>

</Collapsible>

{/* Reviews View */}

<View style={{padding:10, marginTop:10,backgroundColor:'white',flexDirection: 'row', flex:1, justifyContent: 'space-between'}}

onStartShouldSetResponder={()=>console.log("review")}>

<Text style={{fontSize:20, color:'black', fontWeight: 'bold'}}>Reviews (1)</Text>

</View>

</ScrollView>

)

};

// Styling part

const styles = StyleSheet.create({

viewStyle: {

color: 'white',

width: 200,

height: 200,

textStyle: {

color: 'black',

marginTop: 5,

ratingBox: {

flexDirection: 'row',

backgroundColor: 'green',

justifyContent: 'center',

width: 40,

padding: 2,

alignItems: 'center',

box:{

flex:0.5,

flexDirection:'row',

justifyContent:'center',

alignItems:'center',

backgroundColor:'white',

padding:10

viewStyle:{

flex:1,

flexDirection:'row',

backgroundColor:'white',

marginTop:1

wishlistText:{

marginStart:5,

color: 'black'

boldStyle:{

fontWeight: "bold"

counterView:{

flex:10,

flexDirection: 'row',

paddingTop: 10,

paddingStart: 5,

paddingBottom: 10,

paddingEnd: 5,

backgroundColor: 'white',

marginTop: 1

counterPadding:{

flex:1,

paddingTop: 1,

paddingStart: 20,

paddingBottom: 1,

paddingEnd: 20,

backgroundColor: 'black',

borderRadius: 5,

justifyContent: 'center',

alignItems: 'center'

}

});

export default ProductPage;

This React Native component, ProductPage, displays a product with various sections including an image, product details, quantity selector, fetch data from API, collapsible and actions like “Add to Cart” and “Buy Now”.

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

Integrate the Product Page into Your App

Now integrate ProductPage.js into your App.js file.

Open App.js: Replace the existing code with:

import React from "react";

import {Text, View } from "react-native"

import ProductPage from "./App/Screen/ProductPage";

const App = () => {

return(

</View>

)

};

export default App

Now save or reload your react native app to view changes.

Here the Output of the project:

Create Odoo Product Page In React Native

Designing a product page with React Native involves creating a dynamic and visually appealing interface that displays product details such as images, price, reviews, and availability.

Conclusion

Congratulations! You’ve successfully learn how to built an odoo product page in React Native.

Read more interesting React Native Blogs by Mobikul.

Thanks for reading this blog.

Hope this blog helped you to better understand how to create an odoo product page in React Native.