<TouchableOpacity style={styles.arrowImgBlock} onPress={__need to enable hotspot__}>
<Image
source={require('./src/images/arrow.png')}
style={styles.arrowImg}
/>
</TouchableOpacity>
i am bit worried on how can we enable hotspot in react native onPress event?please anyone help me out on this?
Related
I am using react-stomp for subscribing stomp connection but it is only working in debug mode
import SockJsClient from 'react-stomp';
<View>
<SockJsClient
url={STAMP_URL}
topics={stamp_topic}
onMessage={onMessageReceive} />
</View>
If i click on Lungs Banks i want to move to another screen How can i do this
<KeyboardAvoidingWrapper>
<WelcomeStyledContainer>
<StatusBar style="dark" />
<OrganHeading>
<OrganHeadingText>Donate Able Organ</OrganHeadingText>
</OrganHeading>
<View style={styles.container}>
<View style={styles.Box}>
<View style={styles.inerBox}>
<CardStyle>
<CardImage source={require('./../assets/organImage/lungs.png')} />
<CardText>Lungs Bank</CardText>
</CardStyle>
</View>
</View>
Below solution will work for you if you are using React-navigation.
UI Screen:
<CardText onPress={()=>navigation.navigate("YOUR SCREEN NAME HERE")}>Lungs Bank</CardText>
Card Text Component:
const CardText = ({onPress}) => {
return <Text onPress={onPress}>{props.children}</Text>;
}
Thanks!
You can use react-navigation
library to get started with navigation in react-native.
I want to create a box of Terms and conditions in which data can be scrolled. I tried it using TextInput like below but it doesn't scrolls.
<TextInput
multiline={true}
value={data}
editable={false}
scrollEnabled={true}
style={styles.termsAndConditionsStyle}
/>
second alternative
I also tried it this way, it works but it gives me a yellow screen warning which says - You are binding a method component to the component. React does this for you automatically in a high performance way, so you can safely remove this call. See ScrollView.
<ScrollView style={styles.termsAndConditionsStyle}>
<Text>
// some large text
</Text>
</ScrollView>
Solution - Actually I imported ScrollView from react-native-gesture-handler instead of react-native
Did you try <ScrollView>?.
You can use this to create scrolling functionality.
well its pretty simple, just warp your components in <ScrollView> ... </ScrollView>and
style it as per your need.
if height of components together exceeds for <ScrollView>, it becomes scrollable.
see docs at react native
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
I am trying to run a function on press of a picture in react native.
<Image source={mysource} onPress={()=>{Alert.alert("hello")}} />
Am I supposed to do it like this? It doesnt work. I think I should wrap the image by button tags but I am not sure how to do it. Is there any best way to do this?
Yes you need to wrap inside the Touchable property like this:
<TouchableHighlight onPress={() => {Alert.alert("hello")}}>
<Image source={mysource} />
</TouchableHighlight>
React-native Android, when touchable component is put, such as TouchableOpacity in a scrollView/listView, it's very easy to get touch event when the scrollView/listView is scrolling. In react-native iOS, everything is fine. But in React Native Android, it's very annoying.
It's strange, no one ask this question before.
Has anyone seen this issue?
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
automaticallyAdjustContentInsets={false}
style={styles.listView}
/>
renderRow(rowData:rankRecord, sectionID:number, rowID:number) {
return(
<TouchableHighlight
style={{height:70}}
onPress={() => this.goToProfile(rowData.inner_id)}>
<RankCell rowData={rowData}/>
</TouchableHighlight>
);
}