I am parsing data from API, I want some part to show only when I click on the main part. I am first trying to alert it but it is showing null, however all other data is working, I am sure that item.description
is available but it is not working with onPress.
What I want to do is to that description only in last <Text> when someone press the item itself.
<FlatList
data={this.state.data.articles}
renderItem={
({item}) =>
<TouchableWithoutFeedback onPress={ () => { alert( item.description ) } }>
<View>
<Text style={styles.item}>{item.title}</Text>
<Text style={styles.source}> {item.source.name} </Text>
<Text> Description should be here and only showed when item clicked </Text>
</View>
</TouchableWithoutFeedback>
}
/>
Related
I am making an android app with ReactNative. When a button is clicked, an alert shows up with the result (My code is Alert.alert(''Results:", returnResults(a,b,c)). Is there a way I can use Modal and the function returnResults(a,b,c) with it to show the message in a more customised way?
The problem is that when I use normal alert, the text is different on every device and I want to prevent that.(I want to specify the font, its size etc)
const Modal = () => {
const [modal, setModal] = useState(false);
return (
<View>
<Button title="Open Modal" onPress={() => setModal(true)} />
<Modal
animationType="slide"
transparent={false}
visible={modal}
onRequestClose={() => setModal(false)}
>
<View style={{ marginTop: 22 }}>
<View>
<Text>This is the modal content</Text>
<Button title="Close" onPress={() => setModal(false)} />
</View>
</View>
</Modal>
</View>
);
};
I actually found what i had been looking for. I just had to write the following code:
{returnResults(a,b,c)}
export const Focus = ({addSubject})=>{
const [tempValue, setTempValue] = useState(null);
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> What are you going to focus on....?</Text>
<View style={styles.inputcontainer}>
<TextInput style ={{flex:1, marginRight:10}}
onSubmitEditing ={
({nativeEvent}) => {
setTempValue(nativeEvent.text+'0000')
}
}
/>
<RoundedButton title ='+' onPress={
addSubject(tempValue)
}/>
</View>
</View>
</View>
);
}
Just after entering data, once hit the 'return' it submit entered "text+0000"
but once replace with
<RoundedButton title ='+' onPress={
()=>{ addSubject(tempValue)}
}/>
on press is not working
*** I'm testing this on on Expo web
What is the reason for this behavior and what is the solution to make it work once press the button.
Try without braces, then only it will return the addSubject function
<RoundedButton
title ='+'
onPress={()=> addSubject(tempValue)}
/>
I'm making an app with expo react native, and I made a collapse that shows profile information about all users on my SQLite database.
I added a button (touchableopacity) inside the collapse and my idea is to edit information in the input where I'm showing information, but i don't know how to link the button press to the profile where is being touched.
so my code is as follows (i deleted styles to make it cleaner to see):
render(){
const miLista = this.state.datos.map((item) => //this is "list" and it works(show information of each profile and shows the button of each profile when i open the collapse of each on of them)
<ScrollView style={styles.container}>
<Collapse>
<CollapseHeader>
<Text>{item.id} {item.nombre}</Text> //here shows id and name (from sqlite data)
</CollapseHeader>
<CollapseBody >
<View key={item.id} >
<Text >Nombre</Text>
<TextInput
value={item.nombre}
onChangeText={(val) => this.setState({ nombre: val})}/>
<Text style=>Rut</Text>
<TextInput
value={item.rutPersona}
onChangeText={(val) => this.setState({ rutPersona: val})}/>
<Text >Clave</Text>
<TextInput
value={item.clave}
onChangeText={(val) => this.setState({ clave: val})}/>
{this.boton(item.id)}
</View>
</CollapseBody>
</Collapse>
</ScrollView>
);
return(
<View >
<SafeAreaView >
<TouchableOpacity
onPress={() => this.props.navigation.openDrawer()}>
<FontAwesome5 name="bars" size={24} color="#161924"/>
</TouchableOpacity>
</SafeAreaView>
<Text>Perfiles</Text>
<ScrollView>
{miLista}
</ScrollView>
</View>
);
};
so i needed to add .bind to the onpress of my button and pass the data: like this
boton(id,nombre,rutPersona,clave){
return(
<TouchableOpacity
key={id}
style={styles.boton}
onPress={this.funcionBoton.bind(this,nombre,rutPersona,clave,id)}
>
<Text>SAVE </Text>
</TouchableOpacity>
);
};
I have modal for filtering search resluts , something like foursquare app . I have filters in diffrent categories and I need to use tabs for each category . for example when user clicks each tabs it shows the filters related to that tab . and user can select checkboxes or radio buttons . and at the end when user checks all of their needed filters I need to make http request with the new filters.
Something like the image below . I created the modal but I need the functionality for tabs and at the end making the api request with the selected options:
You can also create custom tabs using <Text> with state and depending on a state value render a View associated with that tab. for example
state = {
modalVisible: false,
currentTab: 1,
};
onTabClick = (currentTab) => {
this.setState({
currentTab: currentTab,
});
};
// inside render
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.tabs}>
<Text
onPress={() => {
this.onTabClick(1);
}}
style={[
styles.tabTextStyle,
this.state.currentTab === 1 ? styles.tabUnderline : null,
]}>
GENDER
</Text>
...
</View>
{this.state.currentTab === 1 && (
<View>
<Text>GENDER</Text>
</View>
)}
...
snack example
Modal is just a Container like View. You can draw anything inside it.
First, import {Modal} from 'react-native'
Then, in your modal, embed anything what you want:
<Modal visible={ this.state.modal }
animationType="fade" transparent={true}
onRequestClose={_ => this.setState({ modal: false }) }>
<View>
{/*
Do anything. Its an open ground.
Whatever component, styles, props and/or anything else you want, you can design
*/}
{/* For example, I am adding a close button */}
<TouchableOpacity style={{ alignSelf: 'flex-end' }} onPress={_ => this.setState({ modal: false }) }>
<Icon type="FontAwesome" name='times' style={ styles.closeIcon } />
</TouchableOpacity>
</View>
</Modal>
And you can open your modal from anywhere like:
<TouchableOpacity style={ styles.button } onPress={_ => this.setState({ modal: true }) }>
<Text style={ styles.buttonText }>Open Modal</Text>
</TouchableOpacity>
Finally, for tabs, you can use either of:
NativeBase Tab Component
React Native Tab View
I'm trying to make both onPress to happened TouchableOpacity, but the second one is the only one that fires:
<TouchableOpacity onPress={() => console.warn('first button')}>
<TouchableOpacity onPress={() => console.warn('second button')}>
<Text>
PRESS ME
</Text>
</TouchableOpacity>
</TouchableOpacity>
How can I make both of them fire?
Thanks in advance!
You can fire both of them simply using the 'ref' concept and calling the props onPress.
<TouchableOpacity onPress={() =>
AlertIOS.alert('firstbutton')
}
ref={component => this.myFirstTouchable = component}
>
<TouchableOpacity onPress={() =>
{
AlertIOS.alert('second')
this.myFirstTouchable.props.onPress()
}
}>
<Text>
PRESS ME
</Text>
</TouchableOpacity>
</TouchableOpacity>