Develop Reference

react-native-paper Modal not hiding all others elements when visible

My modal does not go completely above all the other components under Android but works well under Ios.
I tried to change hierarchy of my components, play with zIndex and absolute position but my green button is always visible but not touchable when modal show up.
Modal not visible (Android & Ios):
Modal visible (Android) button is still visible:
Modal visible (Ios) button is NOT visible:
My component:
<View style={styles.container}>
<Spinner
visible={spinner}
textContent={'Recherche de jardins...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={[styles.noThreadContainer, {flex: 5}]}>
<View style={styles.noThreadView}>
<Title style={styles.noThreadTitle}>
Personne autour de vous à {toKm(finalDistance)} km
</Title>
<Button icon="map-marker-distance" mode="contained" onPress={showModal}>
Modifier la distance
</Button>
</View>
</View>
<SliderModal style={{flex: 1}} />
</View>;
SliderModal:
const SliderModal = () => {
const minValue = 5000;
const maxValue = 200000;
const [kmValue, setKmValue] = useState(finalDistance || 5000);
return (
<Provider>
<Portal>
<Modal
visible={visible}
dismissable={false}
onDismiss={hideModal}
contentContainerStyle={styles.sliderContainer}>
<Title style={{alignSelf: 'center', marginBottom: 40}}>
Modifier la distance
</Title>
<View style={styles.kmContainer}>
<Text>{toKm(minValue)} km</Text>
<Title>{toKm(kmValue)} km</Title>
<Text>{toKm(maxValue)} km</Text>
</View>
<Slider
onValueChange={setKmValue}
value={finalDistance}
step={5000}
style={styles.slider}
minimumValue={minValue}
maximumValue={maxValue}
minimumTrackTintColor="brown"
maximumTrackTintColor="#77DD77"
/>
<View style={[styles.kmContainer, styles.buttonContainer]}>
<Button color="brown" onPress={hideModal}>
Fermer
</Button>
<Button
labelStyle={{color: 'white'}}
color="#77DD77"
mode="contained"
onPress={() => {
hideModal();
setFinalDistance(kmValue);
}}>
Valider
</Button>
</View>
</Modal>
</Portal>
</Provider>
);
};
StyleSheet:
const styles = StyleSheet.create({
container: {
flex: 1,
},
sliderContainer: {backgroundColor: 'white', padding: 20},
slider: {width: '100%', height: 40},
kmContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
buttonContainer: {
marginTop: 30,
},
noThreadView: {
alignSelf: 'center',
justifyContent: 'center',
width: width * 0.8,
},
noThreadContainer: {
flex: 1,
alignContent: 'center',
justifyContent: 'center',
},
noThreadTitle: {
marginBottom: 15,
alignSelf: 'center',
},
spinnerTextStyle: {
color: '#FFF',
},
});

Just before button add !visible, like this:
{ !visible && <Button icon="map-marker-distance" mode="contained" onPress={showModal}>
Modifier la distance
</Button>
}

Use react-native-modal Modal instead of react-native-paper Modal. The problem will gone after.
> npm i react-native-modal
import Modal from 'react-native-modal';
Close the server and re-run commmand
> npm run android
Or
> npx react-native run-android

Material-UI styles: convert functional component to class component

So I try the following code to convert a functional component to the classical component, it kinda worked, no error but styles are not applied.
import { makeStyles } from '#material-ui/core/styles';
import { withStyles } from '#material-ui/core/styles';
const playtheMusic = () => {
pauseMusic();
};
const pausetheMusic = () => {
pauseMusic();
};
const useStyles = makeStyles(theme => ({
text: {
padding: 50
},
paper: {
paddingBottom: 50
},
list: {
marginBottom: theme.spacing(2)
},
subheader: {
backgroundColor: theme.palette.background.paper
},
appBar: {
top: 'auto',
bottom: 0,
backgroundColor: '#282828',
padding: '15px'
},
grow: {
flexGrow: 1
}
}));
class BottomAppBar extends React.Component {
// const classes = useStyles();
render() {
const { classes } = this.props;
return (
<div>
<AppBar position="fixed" className={classes.appBar}>
<div style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
<div>
<Typography style={{ fontSize: 15 }}> Stress Out </Typography>
<br />
<Typography style={{ fontSize: 12, color: '#B3B3B3' }}>
Twenty One Pilots
</Typography>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<ShuffleIcon />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipPreviousRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton onClick={pausetheMusic} style={{ color: 'white' }}>
<PauseCircleOutlineRoundedIcon style={{ fontSize: 46 }} />
<PlayCircleOutlineIcon style={{ fontSize: 46, display: 'none' }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipNextRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<RepeatIcon />
</IconButton>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<VolumeUpIcon />
</IconButton>
</div>
</div>
</AppBar>
</div>
);
}
}
export default withStyles(useStyles)(BottomAppBar);
also, there is a problem with StackOverflow. it says "It looks like your post is mostly code; please add some more details". that's the reason I'm writing some unnecessary things XD
you can skip it.
Thanks for reading. have a good day <3

A common approach for material-ui component styling:
Classical
withStyles (High order function) + createStyles
Functional
useStyles (hooks) + makeStyles
In your code, you shall not use the hooks useStyles inside withStyle, hooks shouldn't be used inside any classical component,
Wrong here
export default withStyles(useStyles)(BottomAppBar);
Right example
import { withStyles, createStyles } from "#material-ui/core/styles";
const styles = theme => createStyles({
root: {
},
// ...
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);
Online sample for both classical component and functional component styling

Unexpected Token, expected } even though all the braces have matching pairs

Not sure why it is asking for a brace there. As far as i can tell all the braces are matched. Is it because of a closing tag is wrong somewhere? I am pretty new to react native so I am having trouble understanding some of the basic formatting that is required.
import React, { Component, Header } from 'react';
import { StyleSheet, View} from 'react-native';
import { Button } from 'react-native-elements';
export default class App extends Component {
render () {
return (
<View
style={styles.contain}>
<Button style={styles.leagueButton} title='League Of Legends' />
<Button style={styles.contain} title='CSGO' />
<Button style={styles.overwatchButton} title='Overwatch' />
<Button style={styles.dota2Button} title='Overwatch' />
<Button style={styles.fortniteButton} title='Fortnite' />
<View/>
<Header>
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
<Header/>
)
}
}
const styles = StyleSheet.create({
leagueButton: {
top: 50
},
contain: {
top: 70
},
overwatchButton: {
top: 90
},
dota2Button: {
top: 110
},
fortniteButton:{
top: 130
}
})
Update:Now I get a JSX closing tag error after adding another header tag
Update again: Render error picture

<Header>
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
<Header/>
Problem is u closed off the Header tag which im guessing the centerComponent is the props of it?
UPDATES:
return (
<View
style={styles.contain}>
<Button style={styles.leagueButton} title='League Of Legends' />
<Button style={styles.contain} title='CSGO' />
<Button style={styles.overwatchButton} title='Overwatch' />
<Button style={styles.dota2Button} title='Overwatch' />
<Button style={styles.fortniteButton} title='Fortnite' />
<View/>
<Header>
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
<Header/>
)
There is only one level of tag can be returned but you're returning both View and Header at the same level. So instead you should wrap both into another View
return (
<View>
<View style={styles.contain}>
<Button style={styles.leagueButton} title='League Of Legends' />
<Button style={styles.contain} title='CSGO' />
<Button style={styles.overwatchButton} title='Overwatch' />
<Button style={styles.dota2Button} title='Overwatch' />
<Button style={styles.fortniteButton} title='Fortnite' />
</View>
<Header
centerComponent={{ text: 'Games', style: { color: '#fff' } }}
/>
</View>)

You can also wrap your <Header> and <View> with a single <React.Fragment> </React.Fragment>. That should fix your error.
Put that around your head and view instead of another <View> </View> or ' ' etc.
It basically wraps your stuff together so that you return only one parent div (to meet jsx requirements) but without needing you to wrap your child components with an actual div or higher order component.
The react fragment tag will disappear at the DOM in effect but still allow you to wrap your same level tags under one parent. In the latest versions of react you can also use the new, shorter syntax:
<>
// Your other components / tags
</>
`.

Input text react native cannot get focus

I recently learn react native, but i got problem with input text. When i try to type 1st text field the 2nd text field cannot get focus, when i tap 2nd text field two times text field focus correctly
See video below : https://streamable.com/70njw
My code :
import React, { Component, Fragment } from 'react'
import { View, StyleSheet } from 'react-native'
import { Text, Button, Content, Card, CardItem, Body, Input, Icon, Item} from 'native-base'
import { Grid, Row } from 'react-native-easy-grid'
import ThemeVariable from '../../../native-base-theme/variables/platform'
import AuthHeaderNavigation from '../../components/auth/HeaderNavigation'
class LoginScreen extends Component {
state = {
input: {
email: null,
password: null
}
}
setInputState(key, value) {
this.setState(prevState => ({
input: {
...prevState.input,
[key]: [value]
}
}))
}
render() {
return (
<Fragment>
<AuthHeaderNavigation/>
<Grid>
<Row style={styles.firstRow}></Row>
<View style={styles.authWrapper}>
<Card style={styles.authCard}>
<CardItem>
<Body>
<Item>
<Icon style={{ color: ThemeVariable.footerDefaultBg }} name="person"/>
<Input onChangeText={text => this.setInputState('email', text)} placeholder="Email"/>
</Item>
</Body>
</CardItem>
<CardItem style={{ paddingTop: 0}}>
<Body>
<Item last>
<Icon style={{ color: ThemeVariable.footerDefaultBg }} name="lock"/>
<Input onChangeText={text => this.setInputState('password', text)}
secureTextEntry={true}
placeholder="Password"/>
</Item>
</Body>
</CardItem>
<CardItem>
<Body>
<Button block>
<Text> Login </Text>
</Button>
</Body>
</CardItem>
</Card>
</View>
<Row style={styles.secondRow}></Row>
</Grid>
</Fragment>
)
}
}
const styles = StyleSheet.create({
content: {
height: '100%'
},
firstRow: {
backgroundColor: ThemeVariable.footerDefaultBg
},
secondRow: {
backgroundColor: ThemeVariable.contentBaseBgColor
},
authWrapper: {
position: 'absolute',
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection:'row',
},
authCard: {
width: '90%',
borderRadius: 6,
padding: 5,
}
})
export default LoginScreen
If i change View to ScrollView everything works correctly, but may broken page design

Stretch height to fit content in react native

I want to change the height of the modal to fit to the content. It always just goes to the height of the screen:
jsx:
<Modal style={styles.modal}
isVisible={props.categories.some(x => showModal(x))}>
<Container style={styles.modalView}>
<Header style={styles.header}>
<Left>
<Title
style={styles.title}>{getDisplayedCategoryLabel(props.categories)}
</Title>
</Left>
<Right>
<Button
small
transparent
danger
rounded
icon
onPress={() => props.setAllShowSubcategoriesToFalse()}>
<Icon name="times" size={20} color='#9E9E9E' />
</Button>
</Right>
</Header>
<Content >
<SelectMultiple
labelStyle={styles.label}
items={getDisplaySubcategories(props.categories)}
selectedItems={
props.categories.filter(category => category.selected)
}
onSelectionsChange={props.toggleSubcategory} />
</Content>
</Container>
</Modal>
styles:
const styles = {
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
padding: 20,
borderRadius: 8,
height: 100
},
modal: {
padding: 10,
height: 100
}
}
Changing the height of modal style doesn't do anything. I can't seem to change the height at all. What should I be doing to affect the height?
I'm using react-native-modal

How about something like:
<Modal transparent>
<View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
{/* fill space at the top */}
<View style={{ flex: 1, justifyContent: 'flex-start' }} />
<View style={{ flex: 1, backgroundColor: 'white' }}>
{/* content goes here */}
</View>
{/* fill space at the bottom*/}
<View style={{ flex: 1, justifyContent: 'flex-end' }} />
</View>
</Modal>

This is just a guess but how about you give paddingTop a value of 0 and see how that works out. Remove the generic padding you have and specify it exactly using paddingLeft, paddingRight, paddingBottom according to the style you want to achieve.
Hopefully, that helps some bit