I am using touchable opacity for my home page button, all menus are working perfectly but are not working correctly in two scenarios.
While launching the share popup and moving to another application
Open the play store for rating.
The problem I am facing
While pressing the button, the opacity and all actions work properly, but after coming back to the application, still, the touchable opacity is active.
<TouchableOpacity onPress={()=> shareApp() }>
<View>
<Image source={require('../Assets/Home_page/share.png')}/>
</View>
<View>
<Text>Share my app</Text>
</View>
</TouchableOpacity>
shareApp = () => {
var link="https://play.google.com/store/apps/details?id="+_packageid;
const result = await Share.share({
title: 'App link',
message:'Best app \n'+link,
url:link
});
}
See the above image, after returning to the application, still, the opacity is active. The same happened if the following code is executed.
Linking.openURL(link)
New to react native and in a component, I have a list of views that include a checkbox (react-native-bouncy-checkbox). Each view is wrapped in a TouchableWithoutFeedback(So I can click the entire view, not just the checkbox) and I have a boolean useState to tell the checkbox whether to display the check or not.
The issue I'm at is that I chose the library for the checkbox because the animation when it's clicked looks very nice. However, the animation doesn't play if I hit the view ~ only if I hit the actual checkbox, which is rather small in my app.
Is there any way to tell another component that it needs to act like it was pressed, so it can play its animation?
Code for clarity:
const Task = ({ id, text }: Types) => {
const [checked, setChecked] = React.useState(false);
return (
<TouchableWithoutFeedback onPress={() => setChecked(!checked)}>
<View style={styles.container} >
<BouncyCheckbox
disableBuiltInState={true}
isChecked={checked}
fillColor="blue"
iconStyle={{ borderColor: 'gray' }}
/>
<Text>{text}</Text>
</View>
</TouchableWithoutFeedback>
)
};
Okay figured it out. Apparently React native allows you to create refs to other components and you can use the reference.onPress() to activate the animation.
I want to hide the status bar, when modal window is shown.
My setup is as following, but it won't work as expected:
<StatusBar animated={true} hidden={true} translucent={true}>
Use statusBarTranslucent
If your status bar is translucent, you can set statusBarTranslucent to the modal.
Added since React Native 0.62
<Modal {...props} statusBarTranslucent>...</Modal>
Credit: https://github.com/react-native-modal/react-native-modal/issues/50#issuecomment-607535322
This is a known issue and there seems to be no official/React way to fix it yet. You can follow the discussion here:
https://github.com/facebook/react-native/issues/7474
I saw a post in this discussion which proposes a hack to hide it, but I haven't tried it on my project. You can also upvote this trick if it works for you.
<View style={styles.outerContainer}
<View style={styles.container}>
<StatusBar hidden={true}/>
<View style={styles.content}>
</View>
<Modal animation={fade} transparent={true}>
{/*Modal Contents Here*/}
</Modal>
</View>
A more solid fix may be changing the theme of activity in native android code.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Launcher">
<item name="android:windowBackground">#drawable/launch_screen</item>
</style>
</resources>
Credits go to Traviskn and mbashiq who proposed fixes above. I recommend you to subscribe that issue.
According to the documentations, you should be able to hide status bar in both iOS and Android using this
import {StatusBar} from 'react-native';
StatusBar.setHidden(true);
We can use the background of StatusBar to solve this problem easily but may not the best.
<Modal transparent>
{Platform.OS === 'android' ?
<StatusBar backgroundColor="rgba(0,0,0,0.5)"/>
: null
}
<View style={{backgroundColor: 'rgba(0,0,0,0.5)'}}>
// ModalContent here
</View>
</Modal>
Just use the same background and this problem can be solved.
I am actually facing the same issue for some time, I tried many solutions but I didn't get rid of this problem. I also tried to use native Android code to hide the StatusBar for a single component it works in other component but when I use it in modal it just not working. So, at last, I got a solution that works for me. I remove the modal view and replace it with react-navigation to navigate to a specific path and handle the back button using BackHandler component.
i achieve this creating a custom status bar component with a modal prop:
import React from 'react'
import { StatusBar } from 'react-native'
const MyStatusBar = (props) => {
const { backgroundColor } = props
const { barStyle } = props
const { translucent } = props
const { hidden } = props
const { showHideTransition } = props
const { modal } = props;
(modal !== undefined) ? StatusBar.setHidden(true) : StatusBar.setHidden(false)
return (
<StatusBar showHideTransition={showHideTransition} hidden={hidden} translucent={translucent} backgroundColor={backgroundColor} barStyle={barStyle} />
)
}
export default MyStatusBar
inside my base component modal prop is undefined so custom status bar is shown:
<MyStatusBar backgroundColor={theme.colors.primary} barStyle={'light-content'} />
and then calling inside the component who call the modal:
<MyStatusBar modal={modalVisible ? true : undefined} />
I think the root of my problem is the same, but it appeared a little different than how it is described above.
Expected behaviour: When the Modal becomes visible the StatusBar should hide.
const [showModal, setShowModal] = useState(false)
...
<Modal
visible={showModal}
>
<StatusBar hidden={showModal} />
...
Actual bahviour: Sometimes the StatusBardissapears as expected, other times just the StatusBar background color goes away and the actual StatusBar remains.
Workaround: Due to the flickering behaviour I think the problem is a racing condition of the native Android dialog. Therefore, I built a custom Modal component that uses the StatusBar imperative api to make sure the StatusBar hide call is made before the Modal appears. So far the Problem has not reappeared.
Here is the custom Modal component:
const Modal = ({ visible, children, ...rest }) => {
const [modalVisibility, setModalVisibility] = useState(false);
useEffect(() => {
if (visible) {
StatusBar.setHidden(true);
setModalVisibility(true);
} else {
StatusBar.setHidden(false);
setModalVisibility(false);
}
}, [visible]);
return (
<RNModal
visible={modalVisibility}
{...rest}
>
{children}
</RNModal>
);
};
export default Modal;
Hello you can try this
<View style={styles.outerContainer}
<View style={styles.container}>
<StatusBar hidden={true}/>
<View style={styles.content}>
</View>
<Modal animation={fade} transparent={true}>
{/* Contents Here*/}
</Modal>
</View>
<StatusBar backgroundColor={'transparent'} translucent={true} />
i'm new in react native. i'm use react native action button and i want if button clicked, then show other page. this is my code but still doesn't work. have any solution?
render() {
return (
<View style={styles.container}>
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed}>
</ActionButton>
</View>
);
}
buttonPressed() {
this.props.navigation.navigate('NewCase', {});
}
You don't execute buttonPressed at all. Fix it with ():
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed()}>
Other way would be:
<ActionButton buttonColor="#1E73C1" onPress={this.buttonPressed.bind(this)}>
And like said in the comments, you should ensure that navigation actually exists in the props.
Be sure to pass the navigation prop to the component
Example
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed('page2')}>
buttonPressed(page){
this.props.navigator.replace({
id: page,
})
}
You just put buttonPressed thats doesn't really do nothing if you have a buttonPressed() to exec the transition you need to put buttonPressed() , by the away a good thing to do is putting this type of function with '_' behind , like this: _buttonPressed('page2') and then _buttonPressed(page) , it helps a bit to know what you are doing
i want to generate a button click dynamically for a TouchableOpacity in react-native,
i didn't find anything about that,
all i want is to call the TouchableOpacity onPress from a fuction (or see its effect on the button)
in titanium we were doing $.button.click
i tried using Animated but no luck
https://facebook.github.io/react-native/docs/animations.html
so can anybody help? thanks in advance
It's really inadvisable but something like this should work:
simulatePress() {
this.touchable.props.onPress();
}
render() {
return (
<TouchableOpacity ref={component => this.touchable = component} onPress={() => console.log('onPress')}>
<Text>Tap me</Text>
</TouchableOpacity
);
}
Really though, what you are trying to achieve? There is likely a better way to do it.