We Keep Coding

Text is not updating in React Native

app.js
import { StatusBar } from "expo-status-bar";
import {
TouchableOpacity,
Button,
StyleSheet,
Alert,
SafeAreaView,
Text,
} from "react-native";
export default function App() {
let count = 5;
let counts = [count];
return (
<SafeAreaView style={styles.container}>
<Text style={styles.Text}>Earn Money</Text>
<TouchableOpacity
onPress={() => {
count += 0.25;
console.log(count);
}}
style={{
height: 70,
width: 130,
backgroundColor: "#ff5c5c",
alignSelf: "center",
top: 25,
}}
>
<Text
style={{
fontWeight: "900",
alignSelf: "center",
position: "relative",
top: 25,
}}
>
Earn 0.20$
</Text>
</TouchableOpacity>
<Text style={styles.Balance}>{count}</Text>
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === "android" ? 90 : 0,
paddingLeft: Platform.OS === "android" ? 10 : 0,
},
Text: {
justifyContent: "center",
alignSelf: "center",
color: "orange",
fontSize: 25,
fontWeight: "900",
},
Balance: {
justifyContent: "center",
alignSelf: "center",
color: "orange",
fontSize: 25,
fontWeight: "900",
top: 100,
},
});
So when I press touchableOpacity the count variable is supposed to add 0.25 to itself , That is working fine but the text
<Text style={styles.Balance}>{count}</Text>
is not updating.I would also want to know if the way I dispaly the variable count in <Text><Text/> is correct.
THe text is just showing 5 I have no prior experience with React native if you would help pls do.

React uses some hooks for updating the DOM you can't just use variables and expect it to update the DOM, in this instance you need to use useState hook
import { StatusBar } from "expo-status-bar";
import { useState} from "react";
import {
TouchableOpacity,
Button,
StyleSheet,
Alert,
SafeAreaView,
Text,
} from "react-native";
export default function App() {
let [count, setCount] = useState(0);
return (
<SafeAreaView style={styles.container}>
<Text style={styles.Text}>Earn Money</Text>
<TouchableOpacity
onPress={() => {
setCount(c => c + 0.5)
}}
style={{
height: 70,
width: 130,
backgroundColor: "#ff5c5c",
alignSelf: "center",
top: 25,
}}
>
<Text
style={{
fontWeight: "900",
alignSelf: "center",
position: "relative",
top: 25,
}}
>
Earn 0.20$
</Text>
</TouchableOpacity>
<Text style={styles.Balance}>{count}</Text>
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === "android" ? 90 : 0,
paddingLeft: Platform.OS === "android" ? 10 : 0,
},
Text: {
justifyContent: "center",
alignSelf: "center",
color: "orange",
fontSize: 25,
fontWeight: "900",
},
Balance: {
justifyContent: "center",
alignSelf: "center",
color: "orange",
fontSize: 25,
fontWeight: "900",
top: 100,
},
});
You can read this article to better understand react and how it works.

import { useState} from "react";
const [count,setCount]=useState(5) // 5 is default value
const [update,setUpdate]=useState(0) // add this
export default function App() {
let count = 5;
let counts = [count];
return (
<SafeAreaView style={styles.container}>
<Text style={styles.Text}>Earn Money</Text>
<TouchableOpacity
onPress={() => {
count += 0.25;
setCount(count) // add this
setUpdate(update+1) // add this
console.log(count);
}}
style={{
height: 70,
width: 130,
backgroundColor: "#ff5c5c",
alignSelf: "center",
top: 25,
}}
>
<Text
style={{
fontWeight: "900",
alignSelf: "center",
position: "relative",
top: 25,
}}
>
Earn 0.20$
</Text>
</TouchableOpacity>
<Text style={styles.Balance}>{count}</Text>
<StatusBar style="auto" />
</SafeAreaView>
);
}

Having issue to stretch text input fully?

I'm having a problem to stretch the text input fully till the whole "item.membername" comes into a row like created UI. Currently the "item.membername" goes to second line because of a long string membername. Please do help me out. Below I have attached the UI pictures along with code.
Created UI:
Current UI:
ApprovedScreen.js
import React, {useState} from 'react';
import {GrayCustomView} from './../components/styles';
import {View, Text, TouchableOpacity, Image, FlatList} from 'react-native';
import GlobalStyle from '../components/GlobalStyle';
import {ApprovedReceiptData} from '../constants/dummy'
import { useNavigation } from '#react-navigation/native';
const ApprovedReceiptScreen = () => {
const navigation = useNavigation();
const renderItem = ({item}) => (
<GrayCustomView>
{item.membername === 'No Receipt History' ? (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]}>
<View style={[GlobalStyle.ReceiptUpperContainer]}>
<Text style={[GlobalStyle.ReceiptDetails5]}>{item.membername}</Text>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]} activeOpacity={0.8} onPress={() => {navigation.navigate('ReceiptDetailsScreen',{migrateData: item});}}>
<View style={[GlobalStyle.LeftContainer]}>
<View style={[GlobalStyle.UpperContainer]}>
<View style={[GlobalStyle.ReceiptHeader]}>
<Text style={[GlobalStyle.ReceiptListTitle]}>{item.receiptnum}</Text>
</View>
</View>
<View style={[GlobalStyle.LowerLeftContainer]}>
<View style={[GlobalStyle.ReceiptImageView]}>
<Image style={[GlobalStyle.ReceiptImageList]} source={{uri: item.memberImage}}/>
</View>
<View style={[GlobalStyle.LowerRightContainer]}>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.membername}</Text>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.date}</Text>
</View>
</View>
</View>
<View style={[GlobalStyle.RightContainer]}>
<View style={[GlobalStyle.RightUpperContainer]}>
<Text style={[GlobalStyle.ReceiptListTitle1]}>{item.points}</Text>
</View>
<View style={[GlobalStyle.RightLowerContainer]}>
<Text style={[GlobalStyle.ReceiptDetails4]}>{item.receiptamount}</Text>
</View>
</View>
</TouchableOpacity>
)}
</GrayCustomView>
)
Globalstyle.js
ApprovedButtonContainer:{
width: DEVICE_WIDTH * 0.86,
height: DEVICE_HEIGHT * 0.20,
backgroundColor: white,
elevation: 11,
marginLeft: 30,
borderRadius: 6,
marginBottom: 10,
marginTop: 20,
flexDirection: 'row'
},
LeftContainer:{
flex: 2
},
UpperContainer:{
flex: 1,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptImageList:{
width: DEVICE_WIDTH * 0.15,
height: DEVICE_HEIGHT * 0.09,
backgroundColor: empty,
borderRadius: 6,
marginTop: 10,
marginLeft: 5
},
LowerLeftContainer:{
flex: 2,
flexDirection: 'row',
},
ReceiptImageView:{
flex: 1,
padding: 5
},
LowerRightContainer:{
flex: 2,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptDetails1:{
color: black,
fontSize: 14,
fontWeight: 'normal',
backgroundColor: empty,
},
RightContainer:{
flex: 1,
},
RightUpperContainer:{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptListTitle1:{
color: black,
fontWeight: 'bold',
fontSize: 17
},
RightLowerContainer:{
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptDetails4:{
color: black,
fontSize: 22,
fontWeight: 'bold',
},
ReceiptListTitle:{
color: black,
fontSize: 17,
fontWeight: 'bold',
},
})

React Native Component Exception <Text strings must be rendered within a Text component>

I am trying to build a react native application with the expo, First I try to build this application with my chrome web browser, it was worked without any issue after that I try to test the application with my android device and I'm getting an exception - "Text strings must be rendered within a <Text> component" HomeScreen.js files. I have no idea why this happened. My code as follows,
/*This is an Example of Grid View in React Native*/
// import * as React from "react";
import React from 'react';
import { Image, FlatList, StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
import { COLORS } from '../../asserts/Colors/Colors';
import { CATEGORIES } from '../../asserts/mocks/itemListData';
import CategoryGridTitle from '../components/HomeGridTile';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/HeaderButton';
import HomeScreenButton from '../components/HomeScreenButton';
//import all the components we will need
const renderTopBarItems = (topBarItems) => {
return (
<TouchableOpacity
style={styles.topBar}>
<Text style={styles.textStyle}> {topBarItems.item.category} </Text>
</TouchableOpacity>
)
}
const HomeScreen = props => {
const renderGridItem = (itemData) => {
return <CategoryGridTitle
title={itemData.item.title}
image={itemData.item.image}
onSelect={() => {
props.navigation.navigate({
routeName: 'PaymentHandlerScreen',
params: {
categoryId: itemData.item.id
}
});
}} />;
}
// const [images, setImages] = React.useState(picsumImages);
return (
<View style={styles.mainBody}>
<View style={styles.searchContainer}>
<TextInput
placeholder='Search'
style={styles.formField}
placeholderTextColor={'#888888'}
/>
<TouchableOpacity onPress={() => props.navigation.navigate('BarCodeScannerScreen')}
style={styles.saveFormField}>
<Image
source={require('../../../images/barcode.png')}
style={{
width: '100%',
height: '30%',
resizeMode: 'contain',
alignContent: 'center',
}}
/> </TouchableOpacity>
</View>
<View style={styles.tabBar}>
<FlatList
horizontal
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderTopBarItems} />
</View>
<FlatList
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderGridItem}
numColumns={3} />
<HomeScreenButton style={styles.buttonView} />
</View>
);
};
HomeScreen.navigationOptions = navigationData => {
return {
headerTitle: 'Tickets',
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title='profile'
iconName='ios-star'
onPress={() => {
console.log('profile clicked');
}} />
<Item
title='more'
iconName='md-more'
onPress={() => {
console.log('more clicked');
}} />
</HeaderButtons>
)
};
};
export default HomeScreen;
const styles = StyleSheet.create({
mainBody: {
flex: 1,
justifyContent: 'center',
backgroundColor: COLORS.background,
paddingTop: '3%',
},
searchContainer: {
flex: 1,
flexDirection: 'row',
},
tabBar: {
paddingBottom: '3%',
},
topBar: {
width: 150,
borderWidth: 1,
borderRadius: 20,
borderColor: COLORS.primary_blue,
padding: '5%',
marginLeft: '5%',
},
textStyle: {
color: COLORS.primary_blue,
textAlign: 'center',
fontWeight: 'bold',
fontSize: 14,
},
formField: {
flex: 4,
borderWidth: 1,
padding: '4%',
marginLeft: '2%',
borderRadius: 10,
borderColor: COLORS.gray,
backgroundColor: COLORS.gray,
fontSize: 15,
height: '35%',
},
saveFormField: {
flex: 0.5,
justifyContent: 'space-between',
alignItems: 'center',
margin: 10,
},
buttonView: {
position: 'absolute',
bottom: 0,
left: 0,
},
});
Thank you.

I ran into this error a couple of times. RN doesn't like extra spaces in tags. try removing the spaces before and after {topBarItems.item.category}
<Text style={styles.textStyle}>{topBarItems.item.category}</Text>

Unable to import files

I have been trying to import a component that contains my custom input component into my profile screen.I have tried import both the ProfTab.js(container of my custom textInput component) and the FlexibleInput.js(custome TextInput.js) into my profileScreen.js separately to make sure there was nothing wrong with the files. I have tried deleting the app and restarting the bundle but nothing seems to be working, but i keep getting thrown this error instead.
Failed to load bundle(http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minigy=false) with error: (Unable to resolve module ../Components/profScreenComp/FlexInput from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Componensts/profScreenComp/ProfTabs.js: The module ../Components/profScreenComp/FlexInput could not be found from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Components/profScreenComp/ProfTab.js.
Indeed, none of these files exists)
Below is my profileScreen.js
import React, { Component } from 'react';
import {View, Text, StyleSheet,Dimensions, ImageBackground,Button} from "react-native"
import Auth from "../Components/authComp/auth"
import ProfileTab from '../Components/profScreenComp/ProfTab'
// import FlexibleInput from '../Components/profScreenComp/flexInput'
import {connect} from 'react-redux'
const Width= Dimensions.get('window').width
class ProfileScreen extends Component {
static navigatorStyle = {
navBarHidden: true,
drawUnderNavBar: true,
// navBarTranslucent: true
};
handleNavigation= ()=>{
this.props.navigator.push({
screen: "fluffy.ProfileInfoScreen",
animated: true,
animationType: "ease-in"
})
}
render() {
// let display= (<Auth/>)
if(!this.props.auth){
return(
<Auth/>
)
}else{
return (
<View style={{flex: 1}}>
<ImageBackground style={styles.background}>
<View style= {styles.header}>
<Text style={{color: "white", fontSize: 20,}}>PROFILE</Text>
</View>
<View style={styles.pointsBox}>
</View>
</ImageBackground>
{/* <View style={styles.circle}><Text>M</Text></View> */}
<View style= {styles.activity}>
<View style={styles.tabsContainer}>
<View style={styles.tabs}>
<Text>Profile</Text>
<Text>My Orders</Text>
<Text>Support</Text>
</View>
</View>
<View style={styles.body}>
<ProfileTab/>
{/* <FlexibleInput/> */}
</View>
</View>
</View>
)
}
}
}
const styles= StyleSheet.create({
header:{
width: Width,
height:50,
alignItems: 'center',
justifyContent: "center"
,backgroundColor: "#20265c",
justifyContent: "flex-end",
paddingBottom: 10,
},
background:{
backgroundColor: "maroon",
height: '50%',
flex: 4,
justifyContent:'space-between'
},
pointsBox:{
height: 40,
width: '60%',
backgroundColor: "gray",
borderRadius: 5,
alignSelf: 'center',
},
// circle:{
// alignItems: 'center',
// justifyContent:"center",
// height: 100,
// width: 100,
// backgroundColor: "white",
// position: "absolute",
// borderRadius: 50,
// top: 240,
// left: 140,
// zIndex:2
// },
activity:{
backgroundColor: "gray",
flex: 6,
// justifyContent: "center",
// alignItems: 'center',
},
tabs:{
// marginTop: 10,
// padding: 10,
backgroundColor:'white',
borderRadius: 50,
height: '90%',
width: '90%',
flexDirection: 'row',
justifyContent:'space-around',
alignItems: 'center',
},
tabsContainer:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor: 'orange'
},
body:{
flex: 9,
backgroundColor: 'beige'
}
})
const mapStateToProps = state => {
return{
auth: state.auth.login
}
}
export default connect(mapStateToProps)(ProfileScreen)
This is the component that contains my custom TextInput component
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView} from 'react-native';
import FlexibleInput from '../Components/profScreenComp/FlexInput'
class profTab extends Component {
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.content}>
<FlexibleInput styles={styles.input} />
</View>
</ScrollView>
);
}
}
const styles= StyleSheet.create({
container:{
flex:1,
margin: 10,
padding: 10,
justifyContent:'center',
alignItems: 'center',
},
content:{
height: '100%',
width: '100%'
},
input:{
borderColor: 'red',
}
})
export default profTab
And finally my custom TextInput component
import React from 'react'
import {TextInput, StyleSheet} from 'react-native'
const flexibleInput = (props) => (
<TextInput
{...props}
style={[styles.input,props.styles]}
/>
)
const styles= StyleSheet.create({
input: {
width: "100%",
borderWidth: 1,
borderColor: "#eee",
padding: 5,
marginTop: 8,
marginBottom: 8
},
})
export default flexibleInput

React Native undefined is not a function error

I am new to react native this is my first attempt in react native I was following a sample tutorial for the basic understanding of the code and other things I am following this raywenderlich's propertyfinder example, while implementing the first navigation example I am facing this issue:
undefined is not a function (evaluating 'this.props.renderScene(route,this)')
in my android device(Samsung J7) which I am using to run the app
Here is my index.android.js
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var SearchPage = require('./SearchPage');
var styles = ReactNative.StyleSheet.create({
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
},
container: {
flex: 1
}
});
class PropertyFinderApp extends React.Component {
render() {
return (
<ReactNative.Navigator
style={styles.container}
renderScene={this.renderScene}
initialRoute={{
component: SearchPage,
index:0,
title:"home"
}}/>
);
}
}
ReactNative.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });`
and the SearchPage.js file(the other component which I am using):
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
Image
} from 'react-native';
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
});
export default class SearchPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location.
</Text>
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>
</View>
);
}
}
module.exports = SearchPage;
I have no idea what I am doing wrong since I am a beginner in this any help will be appreciated, thanx in advance.

You for got to write renderScene function, see following example:
<ReactNative.Navigator
...
renderScene={this.renderScene.bind(this)} />
renderScene(route, navigationOperations, onComponentRef) {
switch(route.index) {
case 0:
return <SearchPage />
}
}