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>
);
}
Related
i have broken my head trying to understand a problem with my code. I'm new with React Native so there may be a standard behavior that i am unaware of. This is my problem:
In my component i have a useEffect() to load my data like "componentDidMount":
useEffect( () => {
async function loadDadosLista(){
let listaRecebida = await getListaByID(route.params.idLista);
setLista(listaRecebida);
};
loadDadosLista();
}, []);
My function works correctly, the function getListaById accesses my realm.db and return my object lista. After that I can access the data and associate it with components of type TextInput. My real problem is that any change the i do in any component using properties of lista, overwrites all data leaving only the one that has been modified. I'm using spread operator but apparently it doesn't work. Below is my complete code for better understanding.
function ListConfig(){
const [lista, setLista] = useState({});
useEffect( () => {
async function loadDadosLista(){
let listaRecebida = await getListaByID(route.params.idLista);
setLista(listaRecebida);
};
loadDadosLista();
}, []);
return(
<View style={styles.container}>
<View style={[styles.containerLinha, styles.linha2]}>
<View style={styles.inputLocal}>
<TextInput
name='estabelecimento'
placeholder='Venda do seu Francisco'
placeholderTextColor={theme.colors.cinzaPrimario}
style={styles.textInputLocal(theme)}
value={lista.estabelecimento}
maxLength={25}
onChangeText={ (value) => {
setLista({
...lista,
estabelecimento: value
})
}}
textAlignVertical='bottom'
/>
<IconLocation width={20} height={24} />
</View>
</View>
<View style={styles.containerNotif}>
<Text style={styles.textoNotif(theme)}>
Me notifique 20 minutos antes
</Text>
<ToggleSwitch
isOn={lista.notificacaoAtiva}
onColor={theme.colors.cinzaSecundario}
offColor={theme.colors.cinzaSecundario}
thumbOnStyle={{
backgroundColor: theme.colors.destaque
}}
size="medium"
onToggle={(isOn) => {
setLista({
...lista,
notificacaoAtiva: isOn
});
}}
/>
</View>
</View>
);
}
export default ListConfig;
My object lista have this properties:
{
estabelecimento: 'nameOfEstabelecimento',
notificacaoAtiva: true
}
When I use it works fine.
But when I try to use , nothing appears.
That's my code:
export default props => {
//console.warn(Object.keys(props))
function getUserItem({item: user}) {
console.warn(user.name)
return (
<ListItem
leftAvatar={{source: {uri: user.avatarUrl}}}
key={user.id}
title={user.name}
/>
)
}
return (
<View>
<FlatList
keyExtractor={user=>user.id.toString()}
data={users}
renderItem={getUserItem}
/>
</View>
)
}
Can anybody helps me? Thank you!!!
Use this way
<View style={{flex:1}}>
...
</View>
const getUserItem = ({item: user}) => {
...
}
I'm currently creating a small example of React Native. The issue I'm having is that when I tried to pass the image source from my LoginScreen component to ImageHolder component, the Node shows error below:
Loading dependency graph, done.
error: bundling failed: Error: src\ImageHolder.js:Invalid call at line 7: require({
imageSource: imageSource
})
at C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:247:19
at Generator.next (<anonymous>)
at step (C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:40:30)
at C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:51:15
Here is my code:
LoginScreen.js render:
render() {
if (true) {
return (
<View>
<LoginText
imgSource="./img/account.png"
secureOption={false}
value={this.state.username}
placeholder="username"
onChangeText={username => this.setState(username)}
/>
</View>
)
}
}
LoginText.js:
const LoginText = ({imgSource, secureOption, placeholder, value, onChangeText}) => {
return (
<View style={styles.containerStyle}>
<ImageHolder imageSource={imgSource} />
<InputField placeholder={placeholder} secureOption={secureOption} value={value} onChangeText={onChangeText}/>
</View>
)
}
ImageHolder.js:
const ImageHolder = ({imageSource}) => {
return (
<View style={styles.imgContainerStyle}>
<Image source={require(imageSource)}></Image>
</View>
)
}
The issue is in the path of Image. If all the component on the same path then you can the same thing.
The solutions is that you need to pass Image from LoginScreen.js
render() {
if (true) {
return (
<View>
<LoginText
imgSource={require('./img/account.png')}
secureOption={false}
value={this.state.username}
placeholder="username"
onChangeText={username => this.setState(username)}
/>
</View>
)
}
}
ImageHolder.js
const ImageHolder = ({imageSource}) => {
return (
<View style={styles.imgContainerStyle}>
<Image source={imageSource}></Image>
</View>
)
}
Replace the code above tow js and it will work for you.
The question is almost similar to this one :
touchableopacity onpress function undefined (is not a function) React Native
But the problem is, I am getting the error despite the fact that I have bind the function. Here is my TouchableOpacity component:
<TouchableOpacity style={styles.eachChannelViewStyle} onPress={() => this.setModalVisible(true)}>
{item.item.thumbnail ?
<Image style={styles.everyVideoChannelThumbnailStyle} source={{uri: item.item.thumbnail}} />
: <ActivityIndicator style= {styles.loadingButton} size="large" color="#0000ff" />}
<Text numberOfLines={2} style={styles.everyVideoChannelVideoNameStyle}>
{item.item.title}
</Text>
</TouchableOpacity>
And this is my setModalVisible function:
setModalVisible(visible) {
console.error(" I am in set modal section ")
this.setState({youtubeModalVisible: visible});
}
Also, I have bind the function in constructor as follows:
this.setModalVisible = this.setModalVisible.bind(this);
But, I am still getting same error that undefined is not a function. Any help regarding this error?
The render method and your custom method must be under the same scope. In code below I have demonstrated the same. I hope you will modify your code accordingly as I assume you got the gist :)
class Demo extends Component {
onButtonPress() {
console.log("click");
}
render() {
return (
<View>
<TouchableOpacity onPress={this.onButtonPress.bind(this)}>
<Text> Click Me </Text>
</TouchableOpacity >
<View>
);
}
}
Alternatively binding method in constructor will also work
class Demo extends Component {
constructor(props){
super(props);
this.onButtonPress= this.onButtonPress.bind(this);
}
onButtonPress() {
console.log("click");
}
render() {
return (
<View>
<TouchableOpacity onPress={this.onButtonPress()}>
<Text> Click Me </Text>
</TouchableOpacity >
<View>
);
}
}
I'm not sure if this will help but I write my functions this way and haven't encountered this problem.
If I were you I'd try binding the function in the place where you declare it.
setModalVisible = (visible) => {
this.setState({ youtubeModalVisible: visible });
}
If you do this, you don't have to bind in the constructor.
constructor(props) {
...
// Comment this out to see it will still bind.
// this.setModalVisible = this.setModalVisible.bind(this);
...
}
Lastly, if this function will only set the modal's state to visible, you might want to remove the argument and pass it this way.
<TouchableOpacity style={styles.eachChannelViewStyle} onPress={this.setModalVisible}>
...
</TouchableOpacity>
// Refactored function declaration would look like this
setModalVisible = () => {
this.setState({ youtubeModalVisible: true });
}
I've this....
renderSearchResults() {
if (!this.props.events.successfully) {
return
}
//This don't work
/*
return (
<View>
{
this.props.events.data.data.filter(flt =>
flt.location.toLowerCase().includes(this.state.searchText.toLowerCase()))
.map(item => {
alert(item)
return (<View style={style.searchResultsWrapper} key={'ev' + item.id}>
<EventItem data={item}></EventItem>
</View>)
})
}
</View>
)
*/
//This Works
return (
<View>
{
this.props.events.data.data.map(item => {
return (
<View style={style.searchResultsWrapper} key={'ev' + item.id}>
<EventItem data={item}></EventItem>
</View>
)
})
}
</View>
)
}
I need to make the non-working code to work. Actually the alert line executes fine, so it means that's iterating fine. However this can't render results. Any clue ?
I just put the working code to demonstrante that this works ok without the filter. Is there something that I did't get it ?
Actually, your code run properly with some change like in the below in my demo code. Maybe you look your all component and try with a component like in the below.
<View>
{
this.props.events.data.data.filter(flt =>
flt.location.toLowerCase().includes(this.state.searchText.toLowerCase()))
.map(item => {
alert(item)
return (<View key={'ev' + item.id}>
<Text>{item.location}</Text>
</View>)
})
}
</View>