I am trying to send an image source and title to a custom-made stateless component in React Native, as props. (imageSource and Title)
the props.imageSource line is causing an error, any help appreciated. Here is the code in question:
const MainPageButton = (props) => {
var imageSource = require({props.imageSource});
return (
<TouchableOpacity>
<Image source={imageSource} />
<Text>{props.title}</Text>
</TouchableOpacity>
)
}
You should use object destructuring instead:
const MainPageButton = ({imageSource, title}) => {
var imageSource = require(imageSource);
return (
<TouchableOpacity>
<Image source={imageSource} />
<Text>{title}</Text>
</TouchableOpacity>
)
}
replace
var imageSource = require({props.imageSource});
with
var imageSource = require(props.imageSource);
props.imageSource will give you string which is enough for you to use
Related
I don't know what I did wrong in this function, I thought I had a return but I don't think it's being considered, and when I change the closing brackets or parenthesis it shows an error :/
Can someone help me?
function PopSheet() {
let popupRef = React.createRef()
const sheet =() => {
const onShowPopup =()=> {
popupRef.show()
}
const onClosePopup =()=> {
popupRef.close()
}
return (
<SafeAreaView style ={styles.container}>
<TouchableWithoutFeedback onPress={onShowPopup}>
</TouchableWithoutFeedback>
<BottomPopup
title="Demo Popup"
ref ={(target) => popupRef =target}/>
onTouchOutside={onClosePopup}
</SafeAreaView>
);
}
};
You need to use the render function which is responsible for rendering or display the JSX element into your app.
render() {
return (
<SafeAreaView style={styles.container}>
<TouchableWithoutFeedback
onPress={onShowPopup}></TouchableWithoutFeedback>
<BottomPopup title="Demo Popup" ref={target => (popupRef = target)} />
onTouchOutside={onClosePopup}
</SafeAreaView>
);
}
In my React Native 0.62.3 app, a modal is used to collect user input. Here is the view code:
import { Modal, View, TextInput, Button } from 'react-native';
const [price, setPrice] = useState(0);
const [shippingCost, setShippingCost] = useState(0);
const ReturnModal = () => {
if (isModalVisible) {
return (
<View style={styles.modalContainer}>
<Modal visible={isModalVisible}
animationType = {"slide"}
transparent={false}
onBackdropPress={() => setModalVisible(false)}>
<View style={styles.modal}>
<Text>Enter Price</Text>
<TextInput keyboardType={'number-pad'} onChange={priceChange} value={price} autoFocus={true} placeholder={'Price'} />
<TextInput keyboardType={'number-pad'} onChange={shChange} value={shippingCost} placeholder={'SnH'} />
<View style={{flexDirection:"row"}}>
<Button title="Cancel" style={{bordered:true, backgroundColor:'red'}} onPress={modalCancel} />
<Button title="OK" style={{bordered:true, backgroundColor:'white'}} onPress={modalOk} />
</View>
</View>
</Modal>
</View>
)
} else {
return (null);
}
}
return (
<Container style={styles.container}>
//.....view code
<ReturnModal />
</Container>
)
Here is 2 functions to reset state of price and shippingCost:
const priceChange = (value) => {
if (parseFloat(value)>0) {
setPrice(Math.ceil(parseFloat(value)));
}
};
const shChange = (value) => {
if (parseFloat(value)>=0) {
setShippingCost(Math.ceil(parseFloat(value)));
}
};
The problem is that whenever entering in the price field with keystroke, the modal reloads/resets itself automatically. Tried onChangeText in TextInput and it has the same problem.
It seems like you're declaring your hooks outside your component. Try putting them inside your ReturnModal function instead, like this:
const ReturnModal = () => {
const [price, setPrice] = useState(0);
const [shippingCost, setShippingCost] = useState(0);
...
Documentation reference: Using the State Hook.
Also, I would strongly recommend using the React Hooks ESLint Plugin (among others) to detect issues with your hooks. Here is a guide on how to add this to your React Native project: Add Eslint Support to your React Native Project + React Hooks Rules.
Instead of using animationType = {"slide"} try using animatonType : 'none'
MapBox with react-native.
How to know if a point is on "water"(ocean) or land.
can't find function visibleFeatures in react-native?
var LocationSelect = function(props) {
const mapContainer = useRef(null);
function onMapPointSelect(data) {
/// Get if point is water or land
mapContainer.visibleFeatures(data.geometry.coordinates, styleLayerIdentifiers: ["water"]);
}
return (
<View style={styles.mapContainer}>
<MapboxGL.MapView style={styles.map}
onLayout={onLayout}
onPress={onMapPointSelect}
ref={el => (mapContainer.current = el)} >
</MapboxGL.MapView>
</View>
);
}
Thank you very much
This language is React native
export default function forgotPassword(props) {
const [hidePassword, showPassword] = useState(true);
const managePasswordVisibility = () => {
showPassword({ hidePassword: !hidePassword });
};
return (
<View style={styles.textBoxBtnHolder}>
<TextInput
secureTextEntry={hidePassword}
textContentType="password"
style={styles.textBox}
/>
<TouchableOpacity
activeOpacity={0.8}
style={styles.visibilityBtn}
onPress={managePasswordVisibility}
>
<Image
source={
hidePassword
? require("../../assets/icons/hide.png")
: require("../../assets/icons/view.png")
}
style={styles.btnImage}
/>
</TouchableOpacity>
</View>
);
}
i cant able to use hide password in securityTextEntry if i use hooks its showing error and the password is not showing its just hided and its thows a warning .please any one help
failed prop 'secureTextEntry' of type 'object' suppied to 'forwardRef(TextInput) expected boolen
You don't have to use object inside showPassword(), it will only change value of hidePassword so
showPassword(!hidePassword);
when I'm trying to insert Image into View I get this error
View config not found for name ""
renderCategory = (category)=>{
const { Id, Image, Name } = category.item
const { button, image_category, text_category} = style;
return(
<TouchableOpacity style={style.button} onPress={()=>{console.log(Id)}}>
<View style={{flex:1}}>
//here the problem
<Image style={image_category} source={{uri:'https://picsum.photos/150/150'}} /> // when I remove it, it works fine.
<Text>{Name}</Text>
</View>
</TouchableOpacity>
)
}
render() {
const { container } = style;
return (
<View style={container}>
<FlatList style={{margin:5}}
data={this.state.second_categories}
numColumns={3}
keyExtractor={(item, index) => item.id }
renderItem={this.renderCategory}
/>
</View>
)
}
I looked in other post in stackoverflow but nothing solved my issue.
my styles
image_category:{
width: calcSize(width/4),
height: calcSize(width/4)
},
This issue is due to overwriting of the reserved-word Image.
const { Id, Image, Name } = category.item
The Image string being used in the below code is from category.item, and not the one from {Image} from 'react-native'
<Image style={image_category} source={{uri:'https://picsum.photos/150/150'}} />
Therefore you need to replace the Image object in your category.item object to something else, that is not a react-native reserved word to avoid conflicts.
OR
You may make a stateless component for the image and use it
TLDR
Replace the Image object in category.name to something else as it conflicts with react-native's tag Image or make a separate component for the image
I can't tell what you have in image_category but it must have width and height https://facebook.github.io/react-native/docs/image.html