0
352
VistasHow to solve ViewStyle typescript error in react native?
I'm trying to pass width parameter into StyleSheet like this :
<View style={styles.children(width)}>{children}</View>
And use it like this :
const styles = StyleSheet.create({
modalContent: {
flex: 1,
justifyContent: 'center',
margin: '5%',
},
modalOverlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
},
children: (width: any) => ({
width: width,
backgroundColor: 'white',
position: 'absolute',
bottom: 0,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
paddingVertical: 30,
paddingHorizontal: 20,
}),
});
,
But typescript throws an error This expression is not callable. No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable.
How can I solve this typescript problem ?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
If you want to pass props to stylesheet you have to do something like this
OR
you can use by creating a function which returns ViewStyle
import * as React from "react"
import {View,ViewStyle,StyleSheet} from "react-native"
const App = () => {
return (<View style={Container(width)}></View>)
})
const Container = (width: number | string): ViewStyle => ({
width: width,
height: '50%',
backgroundColor: 'white',
position: 'absolute',
bottom: 0,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
paddingTop: 10,
paddingHorizontal: 20,
})
·
Juan Pablo Isaza
Denunciar
Responde la pregunta