Error: "undefined is not an object (evaluating '_reactNative.Stylesheet.create') (Device" - reactjs

I am new to react native and need help. I created two components one
is for TextInput and another for button, I imported the Button
component in textInput and it show error. can someone help me figure
out the error I made here. I am getting error undefined is not an
object(evalutaing;?_reactnative,stylesheet.create')*
and folder structure in the picture attached
this is button Component
import React from 'react';
import { TouchableOpacity, Text, Stylesheet } from 'react-native';
export const Button = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity style={\[styles(size).radius, style\]}>
<Text style={\[styles.text, textStyle\]}>{props.title}</Text>
</TouchableOpacity>
);
};
**error is likely to be here**
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size,
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
this is textInput component
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { Card } from 'react-native-paper';
import {Button} from '../components/Button';
// You can import from local files
// or any pure javascript modules available in npm
export const Something = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> input something here</Text>
<TextInput />
<Button title="+" />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleContainer: {
flex: 0.5,
padding: 20,
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
color: 'white',
fontSize: 30,
},
});

Mispelled height maybe?
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size, <-------------------- hieght
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});

Related

react native typescript get event target

i am new to react native with typescript and i have a problem
i want to get the text from the Text component so it mean when i press the Text i will console log it
i cant get the target value
i try also currentTarget
but it will give me a huge array of object with ton of keys without any target value
import { GestureResponderEvent, StyleSheet, Text, View } from "react-native";
import React, { useState } from "react";
import Card from "../../components/card/Card";
import ChooseLotteryNumber from "../../components/choose_lottery_number/ChooseLotteryNumber";
const CreateUser = () => {
const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);
const onSelectNumbers = (e: GestureResponderEvent )=>{
console.log(e.currentTarget)
};
return (
<View>
<Card>
<View>
<Text onPress={onSelectNumbers}>choose numbers!</Text>
</View>
<View style={styles.number_container}>
</View>
</Card>
</View>
);
};
export default CreateUser;
const styles = StyleSheet.create({
number_container: {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
backgroundColor: "white",
borderRadius: 10,
},
number: {
fontSize: 24,
margin: 6,
borderWidth: 1,
borderRadius: 5,
textAlign: "center",
width: 35,
},
});

react native text component should not be larger than parent view component

Requirement:
I want to create the link badge.
Here's my code:
import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import {Text, View} from 'react-native';
import HyperLinkIcon from '../../icons/hyperlink-icon';
import RemoveBadgeItemIcon from '../../icons/remove-item-badge-icon';
import {Colors, Typography, Fonts} from '../../theme';
const ItemBadge = ({
url = 'http://www.koovs.com/itemhttp://www.koovs.com/item',
}) => {
return (
<View style={styles.badgeContainer}>
<HyperLinkIcon />
<View style={styles.urlContainerStyle}>
<Text style={styles.urlStyle} numberOfLines={1}>
{url}
</Text>
</View>
<RemoveBadgeItemIcon />
</View>
);
};
export default ItemBadge;
const styles = EStyleSheet.create({
badgeContainer: {
padding: 14,
borderRadius: 12,
backgroundColor: '#F0EFFF',
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
},
urlContainerStyle: {
flexGrow: 1,
paddingHorizontal: 14,
},
urlStyle: {
color: Colors.LABEL,
fontSize: Typography._14,
fontFamily: Fonts.ROMAN,
},
});
But this gives me this:
I am trying to make Text component's maxWidth equal to that of its parent View and also if the url is long then it gets ellipsis.
Responsiveness should also be taken into consideration.

React Native Hooks - How use useStates in Styles

I am using hooks to write a react native app. I have problem with using states inside Styles. The background of text container is red, by default and after pressing the Confirm button should be changed to green. At the moment I face error when I use activeBtn as the backgroundColor in style. Please help me to modify my code in correct way.I simplified my code to be more clear as below:
import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
const DifficultScreen = (props) => {
const [activeBtn, setActiveBtn] = useState("red");
const confirmHandler = () => {
setActiveBtn("green");
};
return (
<View>
<View style={styles.container}>
<Text style={styles.title}>Difficult screen is showing</Text>
</View>
<View>
<TouchableOpacity onPress={confirmHandler} style={styles.btn}>
<Text>Confirm</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: activeBtn,
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 90,
padding: 35,
},
title: {
color: "black",
fontSize: 18,
},
btn: {
color: "black",
padding: "10%",
backgroundColor: "white",
borderRadius: "5px",
alignSelf: "center",
textAlign: "center",
margin: "5%",
},
});
export default DifficultScreen;
In your case, where only one CSS property has to be modified by an external state, I'd use the solution provided by Pradeepsinh Sindhav or Jagrati.
If you have to pass multiple parameters that would impact many properties inside your StyleSheet, you could get the styles object from, per example, a getStyles function:
import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
const DifficultScreen = (props) => {
const [activeBtn, setActiveBtn] = useState("red");
const [height, setHeight] = useState(90);
const [padding, setPadding] = useState(20);
const styles = getStyles(activeBtn, height, padding);
const confirmHandler = () => {
setActiveBtn("green");
setHeight(120)
setPadding(35)
};
return (
<View>
<View style={styles.container}>
<Text style={styles.title}>Difficult screen is showing</Text>
</View>
<View>
<TouchableOpacity onPress={confirmHandler} style={styles.btn}>
<Text>Confirm</Text>
</TouchableOpacity>
</View>
</View>
);
};
const getStyles = (buttonColor, height, padding) => StyleSheet.create({
container: {
backgroundColor: buttonColor,
alignItems: "center",
justifyContent: "center",
width: "100%",
height: height,
padding: padding,
},
title: {
color: "black",
fontSize: 18,
},
btn: {
color: "black",
padding: "10%",
backgroundColor: "white",
borderRadius: "5px",
alignSelf: "center",
textAlign: "center",
margin: "5%",
},
});
export default DifficultScreen;
style property only support a single object with style properties in it, so you need some way to merge a property inside an style object, actually we can do this using javascript spread operator or by passing the style properties as an array
change this :
<View style={styles.container}>
to
<View style={{...styles.container, backgroundColor: activeBtn}}/>
or to :
<View style={[styles.container, {backgroundColor: activeBtn}]}/>
Hello I saw this and have a way I get around this for my own convenience,
This is what I do
Assuming this is my external style.js file
import { StyleSheet } from 'react-native';
import { setWidth, setHeigth, height } from '../../utils/config';
type StylesProps = string | null | undefined
const styles = (colorScheme: StylesProps) => {
console.log(colorScheme,"in style view")
//Check if app is dark theme
const isDark = colorScheme === 'dark';
const a = StyleSheet.create({
container: {
flex: 1,
height: setHeigth(105),
},
imgBox: {
height: setHeigth(70),
overflow: 'hidden'
},
bgImg: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden'
},
headerNote: {
fontSize: setHeigth(4.2),
fontFamily: 'roboto-regular',
fontWeight: '600',
color: isDark ? 'white' : 'black'
}
})
return a
}
export default styles;
Then in my component I use the style this way passing the current state as a parameter
const AppView = () => {
let colorScheme = useColorScheme();
//Check if app is dark theme
const isDark = colorScheme === 'dark';
return (
<View style={[styles(colorScheme).container]}>
<Text style={[tw`pt-6 text-left font-semibold`, styles(colorScheme).headerNote]}>
Some awesome text
</Text>
</View>
);
};
export default AppView;
What you can do is use it within the style of the container like so:
change this:
<View style={styles.container}>
to:
<View style={[styles.container, {backgroundColor: activeBtn}]}/>
This is the way to add dynamic styling to component
im not sure if this is fine and got no warning from react, yet its working great with my theming. also you can use react hooks like useState and add logic inside this customed hook for style. Im doing useStyle instead of style.ts|js
import { StyleSheet } from 'react-native'
import { useTheme } from 'react-native-elements'
import { RFValue } from 'react-native-responsive-fontsize'
export const useStyle = () => {
const { theme: { colors } }: any = useTheme()
const styles = StyleSheet.create({
container: {
backgroundColor: colors?.text,
height: RFValue(40),
width: RFValue(40),
justifyContent: 'center',
alignItems: 'center',
borderRadius: RFValue(4)
},
})
return {
styles,
iconColor: colors.secondary,
iconSize: RFValue(25)
}
}
import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
const DifficultScreen = (props) => {
const [activeBtn, setActiveBtn] = useState(styles.btnRed);
const confirmHandler = () => {
setActiveBtn(styles.btnGreen);
};
return (
<View>
<View style={styles.container}>
<Text style={styles.title}>Difficult screen is showing</Text>
</View>
<View>
<TouchableOpacity onPress={confirmHandler} style={activeBtn}>
<Text>Confirm</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: activeBtn,
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 90,
padding: 35,
},
title: {
color: "black",
fontSize: 18,
},
btnRed: {
color: "black",
padding: "10%",
backgroundColor: "white",
borderRadius: "5px",
alignSelf: "center",
textAlign: "center",
margin: "5%",
},
btnGreen: {
color: "green",
padding: "10%",
backgroundColor: "white",
borderRadius: "5px",
alignSelf: "center",
textAlign: "center",
margin: "5%",
},
});
export default DifficultScreen;

Why isn't my ImageBackground the same inside a TouchableOpacity in React Native?

In my app, I have a screen that shows three rows that contain some text and a background image.
I used to only put the image, but I want to be able to press on the images to execute an action. This was my code before and it worked properly :
import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '#react-navigation/native';
import SelectorBox from '../../components/workout/SelectorBox';
const EXERCISE = require('../../assets/workout/exercise.jpg');
const MUSCLES = require('../../assets/workout/muscles.jpg');
const ROUTINE = require('../../assets/workout/routine.jpg');
export default function SelectorScreen() {
const {t} = useTranslation();
const navigation = useNavigation();
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: "blue"}}>
<SelectorBox image={MUSCLES} title={t('workout.muscleGroups')} />
<SelectorBox image={EXERCISE} title={t('workout.exercises')} />
<SelectorBox image={ROUTINE} title={t('workout.routines')} />
</View>
)
}
import React from 'react'
import {Text, View, ImageBackground, StyleSheet, Dimensions} from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
export default function SelectorBox(props) {
return (
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
However, when I change the code, all my SelectorBox disappear...
export default function SelectorBox(props) {
return (
<TouchableWithoutFeedback style={styles.option}>
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
option: {
flex: 1,
width: Dimensions.get('window').width,
// backgroundColor: 'red'
},
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
I would like to be able to keep it like this screenshot everywhere. Right now, the screen is empty. (blue background, this is what i set it to)
Can you guide me ?
Try to debug the issue by steps.
Try and and import TouchableOpacity from react-native instead of react-native-gesture-handler. Does the backgroundColor: 'red' color works if uncomment it from the option style?
Change this:
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
to import from RN:
import { TouchableWithoutFeedback } from 'react-native'
You should consider of using TouchableOpacity instead of TouchableWithoutFeedback:
TouchableWithoutFeedback
Do not use unless you have a very good
reason. All elements that respond to press should have a visual
feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.

How can I navigate to other screen using HeaderRight component in stack navigtaor?

I want to navigate to other screen onPress of profile-image on HeaderRight
component of stacknavigator? I've used tabnavigator inside my routersnavigator(tabscreen).
Screen Image attached with it.onpress of profile icon in header should navigate to other screen]1
import React, { Component } from 'react';
import {Platform,StyleSheet,
Text,
View,Dimensions,Image,TouchableHighlight
} from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vectoricons/MaterialIcons';
import NavigatorScreen from './src/Components/NavigatorScreen.js'
import Favourites from './src/Components/Favourites.js'
import Scenes from './src/Components/Scenes.js'
import Likes from './src/Components/Likes.js'
import profile from './src/Components/Profile.js'
const Navigation = StackNavigator ({
Register: { screen: NavigatorScreen,
navigationOptions: {
headerTitle: 'SCENES',
headerLeft: <Icon style={{marginLeft:18, color:'#000'}} name={'ios-notifications-outline'} size={28}/>,
headerRight: <View>
<TouchableHighlight onPress = { () => navigate ("profile", {}) }>
<Image borderRadius={14}
style={{width: 28, height: 28,marginRight: 18, borderWidth:1}}
source={{uri : 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg'}}
/>
</TouchableHighlight>
</View>,
headerTintColor: 'white',
headerStyle:{
backgroundColor: '#fff',
shadowOpacity: 0,
shadowOffset: {
height: 0,
width:0
},
shadowRadius: 0,
elevation: 0,
},
headerTitleStyle: {
color: '#36292a',
fontFamily: 'WorkSans-Regular',
fontWeight: '300',
fontSize: 14,
alignSelf: 'center'
},
}
},
profile: {
screen: profile
},
});
export default Navigation;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
This is what you want.
navigationOptions : (props) => {
const {navigation} = props;
return ({
...
headerRight:<TouchableOpacity onPress = {() => navigation.navigate ("profile", {}) }> /*your code*/
...
})
}
this error just because of editProductSceen expect id but when i clicked on icon i have not pass the id. so i have resolve this error to apply the check by using this code in editscreen
let prodId = null;
if (route.params && route.params.prodId) {
prodId = route.params.prodId;
}
instead of const {prodIs} = route.params

Resources