How to solve ViewStyle typescript error in react native?

Question

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 ?

Answer 1

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,
})