In my react native app I have a modal
Inside this Modal I have a FlatList
<Modal animationType="slide" transparent={false} visible={this.state.typeVisible}>
<View style={styles.modalView}>
<View style={styles.modal_header}>
<Text style={styles.modal_header_text}>Select Type</Text>
<Ionicons name="ios-close" size={48} style={styles.modal_header_close} onPress={this.toggleType} />
</View>
<View style={styles.modal_list_container}>
<FlatList
keyExtractor={item => item.key}
data={[{ key: "Call Out" }, { key: "Call" }, { key: "Delivery" }, { key: "Dealt By Caller" }]}
renderItem={({ item }) => (
//this.handleType(item.key)
<TouchableWithoutFeedback
onPress={() => alert("Working!!") }
>
<View>
<Text style={styles.modal_list_item}>{item.key}</Text>
</View>
</TouchableWithoutFeedback>
)}
/>
</View>
</View>
</Modal>
On IOS each of the items in the FlatList are clickable and the onPress will trigger the "Working!!" alert.
However the onPress is not working on Android. If I take the Flatlist outside the Modal the onPress will trigger the alert fine.
Can anyone tell me what I might be doing wrong in trying to get it working inside the Modal on Android?
Ps: I have also tried TouchableOpacity in place of TouchableWithoutFeedback but to no avail
Thanks
I assume you are importing TouchableOpacity (TouchableWithoutFeedback) from "react-native-gesture-handler"
I don't know why, but you need to import it from "react-native"
import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
Hope that would help
Related
When I click on Sign Up button I want to navigate to Sign up page but it did not work. I have imported the screens and navigated screen also to app.js file. I am getting an ReferenceError : Can't find variable: navigation. Also I am unable to insert background image? Below is the Sign Up page.
import React from 'react';
import { StyleSheet,ImageBackground,Text, View, TextInput, TouchableOpacity } from 'react-native';
let bgImage='../../resources/images/bg2.png'
export default class LoginScreen extends React.Component {
state={
email:"",
password:"",
}
render(){
return (
<View style={styles.container}>
<Text style={styles.logo}>Trollo</Text>
<View style={styles.box}>
<View style={styles.inputView} >
<TextInput
style={styles.inputText}
placeholder="Email"
placeholderTextColor="#808080"
onChangeText={text => this.setState({email:text})}/>
</View>
<View style={styles.inputView} >
<TextInput
secureTextEntry
style={styles.inputText}
placeholder="Password"
placeholderTextColor="#808080"
onChangeText={text => this.setState({password:text})}/>
</View>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>SIGN IN</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.forgot}>Forgot Password?</Text>
</TouchableOpacity>
</View>
<Text style={styles.text1}>New Here?</Text>
<TouchableOpacity style={styles.signupBtn} onPress = {(navigation) => navigation.navigate('Sign Up')}>
<Text style={styles.loginText}>SIGN UP</Text>
</TouchableOpacity>
<Text style={styles.logoText}>Trollo</Text>
</View>
);
}
}
});
onPress handler does not getting called with navigation as the first parameter. That is undefined. navigation is a prop to your class component which is provided by stack navigator setup.
Instead of
onPress = {(navigation) => navigation.navigate('Sign Up')}
use
onPress = {() => this.props.navigation.navigate('Sign Up')}
Hi my custom component is wrapped in TouchableOpacity like this.
const profileOnClick = () => {
console.log('Card Clicked!');
};
export const InfluencerCard = props => {
const {influencer, navigation} = props;
return (
<TouchableOpacity onPress={() => profileOnClick()}>
<Card>
<Text>
{influencer.user.name}
</Text>
<Text>
{influencer.tags[0].name}
</Text>
</Card>
</TouchableOpacity>
);
};
In Homescreen
<ScrollView>
{data.categoriesForHome.map(category => (
<Layout key={category.id}>
<Text>
{category.name}({category.total})
</Text>
<ScrollView horizontal={true}>
{category.influencerProfiles.map(profile => (
<View key={profile.id}>
<InfluencerCard influencer={profile} />
</View>
))}
</ScrollView>
</Layout>
))}
</ScrollView>
When I clicked my custom component InfluencerCard, it doesn't do anything.
I wonder it is because that component is in other component, so parent component block clicking on custom component. Or calling onPress function is wrong.
But I tried without parent component, it was working.
What am I missing?
It was my mistake. The problem was not from code or components.
I use Card component from #ui-kitten/components and it implements TouchableOpacity behind the scene. So I don't need to wrap with TouchableOpacity again.So just do
<Card onPress={() => profileClick()}></Card>
I have a structure like this:
<View style={container}>
<View style={first}></View>
<View style={second}><View>
<View style={third}</View>
</View>
The container pretty much fills the whole screen.
When the user touches the container and moves the finger around without lifting the finger, I would like to know which View the finger is currently placed at.
Use TouchableWithoutFeedback to wrap around your views, and then you can call the onPressIn function to detect touch event.
You cannot detect the touched view unless and until you don't have any touch event on it.
To do that you can use TouchableOpacity (respond to the press and have visual feedback when touched.) or TouchableWithoutFeedback (it won't show any visual feedback when touched)
Below is the sample example as required:
import React, { Component } from 'react'
import {
TouchableOpacity,
View
} from 'react-native'
export default class SampleComponent extends Component {
constructor(props) {
super(props)
}
_onPressView = (viewName) => {
console.log("Tapped View ===> ", viewName)
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this._onPressView("FirstView")}>
<View style={styles.first}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => this._onPressView("SecondView")}>
<View style={styles.second}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => this._onPressView("ThirdView")}>
<View style={styles.third}/>
</TouchableOpacity>
</View>
);
}
}
I have this code:
<View style={{flex:1}}>
<ScrollView>
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>
</ScrollView>
</View>
The problem is, my FlatList's data appears but my child component MoviesChild disappears. Maybe Flatlist overlaps the child component. Could someone figure out where I'm doing a mistake please?
You should give style to ScrollView with flexGrow:1
I suggest you not to use FlatList inside a ScrollView, 'cause FlatList scroll itself. So, in order to achieve your objective, wrap your first View in a function and pass it to the ListHeaderComponent property of your FlatList, like this:
<View style={{flex:1}}>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
ListHeaderContainer={this.renderHeader}
/>
</View>
</View>
where
private renderHeader = () => {
return(
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
)
}
I hope this can fix your issue!
You can find what I'm talking about on the official doc
Try this,
<View style={{flex:1}}>
<View style={{ flex:0.25,elevation:2,marginVertical:5 }}>
<MoviesChild/>
</View>
<FlatList
style={{flex:0.75}}
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>
How can I set focus to the first (or any given) TouchableHighlight component inside the modal when it's opened?
I'm using D-pad/kayboard/TV Remote
Let's use the fragment of the react-native documentation modal example:
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<TouchableHighlight>
<Text>Button 1</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text>Button 2</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
Navigation with D-pad works, but when the modal is opened, the first TouchableHighlight (button 1) is not focused, focus remains on the "Show Modal" button
Or, How can I set focus on the "Button 2" TouchableHighlight programatically?
TextInput for example has autoFocus, but TouchableHighlight no, if we are using only Touchable components inside a modal, I don;t know how to autoFocus them, or set implicitely it
Best Regards
Add hasTVPreferredFocus: true to the TouchableHighlight you want focused.
It is implemented on Android even though the documentation states that hasTVPreferredFocus is iOS-only.
Programmatically you can also force the focus by calling:
yourElementRef.setNativeProps({ hasTVPreferredFocus: true })
#mtkopone . is there any way to focus View component, i have a list which is inside View and i want to do some function calls when user focus on that View (onFocus,onBlur)
initialRef.current.setNativeProps({hasTVPreferredFocus: true});