I am using a windows device with a touch screen, I would like for an input field that I have to open the on-screen windows keyboard, is there a way to do that in react native for windows?
You can initiate focus on component mount. Give a ref to TextInput using useRef().
const ref = useRef<TextInput|null>(null); // If you are using typescript
// If not then just
// const ref = useRef();
React.useEffect(() => {
ref.current?.focus();
}, []);
<TextInput ref={ref} {...otherProps} />;
Related
I am new to react and need help in fixing an issue.
<Tab.Container id="left-tabs-example" defaultActiveKey="detailsTab">
for desktop I want 'detailsTab' to be active but for mobile I dont want any tab to be active by default. in mobile i am sliding in and out tabs on click.
I tried to use 'react responsive enter link description here to change the "defaultActiveKey" value but since its a component i am unable to do so.
const isBigScreen = useMediaQuery({ query: '(min-width: 768px)' });
const isMobile = useMediaQuery({ query: '(min-width: 768px)' });
const [key, setKey] = useState('detailsTab');
trying to updating the default key in const
<Tab.Container id="left-tabs-example" activeKey={key} onSelect={(k) => setKey(k)}>
I need to pass state from my child screen to the parent screen . I am having difficulties doing this. I am letting the user press a button to navigate to the child screen. After filling info in the child screen I am trying to pass the value back to the parent screen with props.navigation.goBack() Can someone help me out with this.
I am using react navigation v4
Parent screen:
const Parent = (props) => {
const [day, setDay] = useState("");
return (
<TouchableOpacity
onPress={() =>props.navigation.navigate({ routeName: 'Child' })}>
</TouchableOpacity>
);
};
Child screen (I want to pass the day state back to the parent)
const Child = props => {
const [day, setDay] = useState("");
return (
<View style={styles.container}>
<TextInput onChange={(text)=> setDay(text)}/>
<Button onPress={()=>props.navigation.goBack()}/>
</View>
);
};
If it is not possible to use the normal navigation way maybe try to build your own back function and pass params with it.
Take a look at this maybe:
goBack() {
const { navigation } = this.props;
navigation.goBack();
navigation.setParam({ day: dayData});
}
then the call would be :
<Button onPress={()=>this.goBack()}/>
you can get the param with :
this.props.navigation.getParam("day")
try it somehow like this - if it does not work try the calls with this.props.navigation...
or only with navigation.goBack() and so on because I am not sure wich syntax will work for you.
I want to hide controls on mobile devices but there is only true or false values in component props <Carousel controls={true}>. Is there any way to do this with react-bootstrap? Or maybe is another simple way?
On mount of the component, you can check to see the device size. After that, assess if the Carousel controls need to be false (on small devices) or true (on big devices).
For example on functional components:
function App(){
const [controlsAreVisible, setControlsAreVisible] = useState(true);
useEffect(()=>{
// iPhone X width, for example
if (window.innerWidth <= 375) {
setControlsAreVisible(false)
}
// you can also set up event listeners here for "resize" for full responsiveness
}, [])
return(
<Carousel controls={controlsAreVisible}>
...
)
}
I am using react navigation v5.0 in my project.
In previous version there is an option called "drawerLockMode" by which we could disable swipe gesture from opening the navigation drawer in an specific screen.
How can I use this option in v5.0 ?
Use gestureEnabled option
Whether you can use gestures to open or close the drawer. Defaults to true.
https://reactnavigation.org/docs/en/drawer-navigator.html#gestureenabled
If using inside functional component, use React's useLayoutEffect() hook like this:
function HomeStackNavigator({navigation, route}) {
const dispatch = useDispatch();
//Lock drawer on all screens except the first one i.e. Home
React.useLayoutEffect(() => {
route.state !== undefined
? route.state.index > 0
? navigation.setOptions({gestureEnabled: false})
: navigation.setOptions({gestureEnabled: true})
: null;
}, [navigation, route]);
return (
<Stack.Navigator initialRouteName="Home" headerMode="none">
...
</Stack.Navigator>
I have the following navigation structure in my React Native app:
StackNavigator configured with 3 routes:
Splash screen (React Component)
StackNavigator for my login flow
DrawerNavigator for my core app screens.
The DrawerNavigator has some dynamic multiple routes, but also one static route which is another StackNavigator.
Everything seems to be working as expected:
The store is being updated accordingly.
Navigation between screen works.
Go back between screen works when configured within each component, with the following command:
this.props.navigation.goBack();
My question is - is there a way for me to handle back button on Android globally? Currently when I click on the back button, nothing happens (due to the fact I'm using Redux). Should I handle the back button in each component or is there a way of doing it using Redux?
A bit late, but there is a way to handle this with redux. In your index.js file where you create your store you can make export a class and add a componentWillMount call to handle dispatching a call to your redux actions. Just remember to import the actions you need above.
const store = configureStore();
export default class Index extends Component {
componentWillMount = () => {
BackHandler.addEventListener('hardwareBackPress', () => {
const { nav: { routes } } = store.getState();
const currentRouteName = routes[routes.length-1].routeName;
if (currentRouteName === 'EditCoupleProfile') {
store.dispatch(editCoupleActions.navigateBack())
} else if ( currentRouteName === 'EditInterests' ) {
store.dispatch(interestsActions.navigateBack())
} else {
store.dispatch(popFromStack());
}
return true;
})
};
componentWillUnmount = () => {
BackHandler.removeEventListener('hardwareBackPress');
};
render() {
return (
<Provider store={store}>
<AppWithNavigation />
</Provider>
);
}
}