I'm trying to add a border to the image when its clicked, like a radio button, but only with an image.
The code works perfectly on web but when I try to click the image on the device it doesn't do anything!
I tried to do Alert.alert() and it's like it doesn't register the click.
let stylereg_na = { borderRadius: 3, height: hp('7%'), width: wp('25%')};
let stylereg_eu = { borderRadius: 3, height: hp('7%'), width: wp('25%')};
if(regNA)
{
stylereg_na = {borderWidth: 2, borderColor:'black', borderRadius: 3, height: hp('8%'), width: wp('26%')};
}
return (
<Image style={stylereg_na} source={na} onClick={() =>
{
if(regNA)
setRegNAStatus(false);
else
{
setRegNAStatus(true);
}
}
);
You need to wrap it Touchable component like this
<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
<Image style={stylereg_na} source={na} />
</TouchableWithoutFeedback>;
refer to the documentation if you wanna learn more about it, like TouchableHighlight or TouchableOpacity https://reactnative.dev/docs/touchablewithoutfeedback
Related
Within one of my components a user can click a button that pulls up a signaturePad they can sign on. This is working, however, I'd like the signaturePad to take up the full screen, whereas now it appears between the footer and header. How can I accomplish this? I played around with using { flex: 1 } on the View of the SignaturePad, but this had no visible effect.
Here is the relevant code from the parent component. If a certain state is true, the signaturePad displays:
{this.state.signaturePanelIsVisible && (
<SignaturePanel
session={this.props?.session}
signaturePanelIsVisible={this.state.signaturePanelIsVisible}
/>
)}
And the signaturePad component code looks like this:
const SignaturePanel = (props) => {
const dispatch = useDispatch();
return (
<SignaturePanel
actionStyle={{
...styles.texts.mediumText,
color: styles.colors.primary,
textDecorationLine: 'underline',
}}
onCancel={async () => {
props.hideSignaturePanel();
}}
onSave={async (base64) => {
const base64Result = base64.base64DataUrl.substr(base64.base64DataUrl.indexOf(',') + 1);
dispatch(
await updateSignature({
...props.signature,
guid: props.session.guid,
value: base64Result,
lastUpdate: Date.serverTime(),
})
);
}}
/>
);
};
export default SignaturePanel;
And the styling applied looks like this:
container: {
width: '100%',
height: '100%',
zIndex: 98,
position: 'absolute',
backgroundColor: '#fff',
},
You'll need to add position: 'absolute' to the style of your modal. Setting the height and width to 100% as well sometimes works, depending on how your app is set up. This will either cover the screen with the component, or make the component appear under the header and overflow the bottom of the screen. To fix the latter issue, add top: -<height of header>. This way the component will move up and cover the header.
<Modal style={styles.modal}>
<View style={styles.signaturePad}>
</View>
</Modal>
modal: {
position: 'absolute',
height: '100%',
width: '100%',
top: -n, //(where n = height of your header)
}
signaturePad: {
height: '100%',
width: '100%',
}
Depending on how your project is set up, you may not need the top value. These are general settings that you should usually put on a modal component. It's considered best practice to have a modal cover the whole screen, then add the component you want to display as a subcomponent.
I want to display an image from my data. It works when I use Flatlist but Flatlist has conflicts with ScrollView, so I had to change my displaying method from Flatlist to mapping with component.
First name renders when I use {profile.first_name}, but the image won't render. I believe the issue is in the source = {} of the Image. I have tried profile.banner_picture and that has not worked either.
const bannerPicture = () => {
return profile.map((profile) => {
return (
<View key={profile.key}
style={{padding: 1}}>
<Image
source={banner_picture}
style = {{
height: 100,
width: 100,
}}/>
<Text>{profile.first_name}</Text>
</View>
);
});
};
When I change
source = {banner_picture}
//to this
source={{uri: banner_picture}}
// it works
const bannerPicture = () => {
return profile.map((profile) => {
return (
<View key={profile.key}
style={{
flex: 1,
height: 400,
width: 400,
padding: 1}}>
<Image
source={{uri: banner_picture}}
style = {{
height: 100,
width: 100,
}}/>
<Text>{profile.first_name}</Text>
</View>
);
});
};
I have this picture, and I want to have multiple onPress event for this image.
Example if I touch the head part it will call the function pressHead() and if I touch the chest part it will call the function pressChest().
So far I have tried plotting checkboxes on each part.
import React, { Component } from 'react';
import { View, Image, Alert } from 'react-native';
import { CheckBox } from 'react-native-elements';
export default class Screen extends Component {
pressHead() {
this.setState({checked1: !this.state.checked1})
Alert.alert('Pressed Head', '');
}
pressChest() {
this.setState({checked2: !this.state.checked2})
Alert.alert('Pressed Chest', '');
}
render() {
return (
<View style={{width: 200}}>
<Image
style={{width: 200, resizeMode: 'contain'}}
source={require('../../assets/images/body-diagram.png')}
/>
<CheckBox
containerStyle={{position: 'absolute', top: 22, right: 75, padding: 0}}
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checkedColor='#ff0000'
checked={this.state.checked1}
onPress={() => this.pressHead()}
/>
<CheckBox
containerStyle={{position: 'absolute', top: 70, right: 75, padding: 0}}
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checkedColor='#ff0000'
checked={this.state.checked1}
onPress={() => this.pressChest()}
/>
</View>
);
}
}
This does work. But if I try to use it on a larger device, the position absolute becomes not accurate enough.
Give the constant height for the image and overlay the checkboxes as same above respect to image. Since height is also made constant you don't find any position issues of the checkbox in any screen.
Example :
<View style={{width: 200, height: 600}}>
<Image
style={{width: 200, height: 600 ,resizeMode: 'contain'}}
source={require('../../assets/images/body-diagram.png')}
/>
You can do it by changing your image to <ImageBackground .. /> component after importing it from react-native.
After doing that you can place Touchable things inside of ImageBackground.
Example:
<ImageBackground source={require('../../assets/images/body-diagram.png')} style={{width: 200, height: 600, flexDirection: 'column'}}
<TouchableOpacity onPress={() => alert('first pressed')}>
<Text>First Area</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => alert('second pressed')}>
<Text>Second Area</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => alert('third pressed')}>
<Text>Third Area</Text>
</TouchableOpacity>
<ImageBackground/>
Sorry for my bad English. I have built a navigation bar without using Tab Navigation from React Navigation, everything works fine except when I try to set an 'active' icon, I have handled it with states but the state restarts when I navigate to another window and render the bar again navigation.
I think I have complicated it a bit, but I need to capture the active screen to pass it as status and change the color of the icon to 'active' and the others disabled. I have tried with Detect active screen and onDidFocus but I only received information about the transition, I require the name or id of the screen.
I leave my code (this component is exported to each page where I wish to have the navigation bar). Please, the idea is to not use Tab Navigation from React Native Navigation.
export default class Navbar extends Component {
/** Navigation functions by clicking on the icon (image) */
_onPressHome() {
this.props.navigation.navigate('Main');
}
_onPressSearch() {
this.props.navigation.navigate('Main');
}
render() {
const { height, width } = Dimensions.get('window');
return (
<View style={{ flexDirection: 'row', height: height * .1, justifyContent: 'space-between', padding: height * .02 }}>
/** Icon section go Home screen */
<View style={{ height: height * .06, alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this._onPressHome()}
style={styles.iconStyle}>
<Image
source={HOME_ICON}
style={{ width: height * .04, height: height * .04, }} />
<Text style={[styles.footerText, { color: this.state.colorA }]}>Inicio</Text>
</TouchableOpacity>
</View>
/** Icon section go Search screen */
<View style={{ height: height * .06, alignItems: 'center' }} >
<TouchableOpacity
onPress={() => this._onPressSearch()}
style={styles.iconStyle}>
<Image
source={SEARCH_ICON}
style={{ width: height * .04, height: height * .04, opacity: .6 }} />
<Text style={[styles.footerText, { color: this.state.colorB }]}>Inicio</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
For the navigation I used createStackNavigator and also
const drawerNavigatorConfig = {
contentComponent: props => <CustomDrawerContentComponent {...props}
/>,
};
const AppDrawer = createDrawerNavigator(drawerRouteConfig,
drawerNavigatorConfig);
I do not know if createDrawerNavigator is interfering with something, I read that it generates additional keys. Please help me with this.
import { useIsFocused } from '#react-navigation/native';
function Profile() {
const isFocused = useIsFocused();
return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}
check documentation
https://reactnavigation.org/docs/use-is-focused/
You can use this inViewPort library for checking the view port of the user. This is how you can user the library
render(){
<InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200, backgroundColor: 'blue'}}>
<Text style={{color: 'white'}}>View is visible? {this.state.visible </Text>
</View>
</InViewPort>
}
I'm trying to create a simple React Native app that:
Renders "Hello, [name]!" when a user enters a name (this part works)
Changes the "Hello, [name]!" text color when a button is pressed.
Any ideas as to how I should go about this?
I gave this an initial state of black, but that doesn't even seem to be doing anything.
What I want to happen is to trigger makeRed when the red button is clicked, which will turn the text red. Once I have this working, I'll add more color buttons.
Thank you!
See below for my App.js code. All other files were left in their default state.
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
TextInput,
View,
Button
} from 'react-native';
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
text: 'World',
color: 'black'
};
}
makeRed = () => {
this.setState({
color: 'red'
});
}
render() {
return (
<View style={styles.container}>
<Text style={[styles.welcome, {color: undefined}]}>
Hello, {this.state.text}!
</Text>
<TextInput
style={styles.instructions}
placeholder="Enter a name here!"
onChangeText={(text) => this.setState({text})}
/>
<Button
title='⬤'
onPress={this.makeRed}
color='red'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 40,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Here's a screenshot of the app for reference:
app screenshot
All you need to do is change this :
style={[styles.welcome, {color: undefined}]}
To
style={[styles.welcome, {color : this.state.color }]}
Please check : WORKING DEMO
color is not referenced as a property of state , in the style of the Text component. Try this as the Text element:
<Text style={{color: this.state.color, ...styles.welcome}}>
Hello, {this.state.text}!
</Text>
And, makeRed needs to be have it's context bound in the constructor, or else this.setState will be undefined. Like this (under super(props)):
this.makeRed = this.makeRed.bind(this)