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 ?

it complains because any style props don't have callable props if you create your styles with ```StyleSheet.create()``` — Mod3rnx, Feb 05 '22 at 23:21

score 4 · Answer 1 · answered Feb 05 '22 at 21:09

4

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

answered Feb 05 '22 at 21:09

Dheeraj

240
2
8

This didn't work me and has some problems – Mehdi Faraji Feb 05 '22 at 21:17
can you elaborate more what problem you are facing – Dheeraj Feb 05 '22 at 21:21
I want to use it this way ```styles.children(width)``` – Mehdi Faraji Feb 05 '22 at 22:27

score 2 · Accepted Answer · answered Sep 04 '22 at 04:15

I solved the issue implementing it in another way with typescript :

import React, { FC } from "react";
import {
  ActivityIndicator,
  StyleSheet,
  TextStyle,
  TouchableOpacity,
  ViewStyle,
  Platform,
} from "react-native";
import { colors } from "../../styles";
import { fonts } from "../../styles";
import Text from "./Text";

interface ButtonProps {
  style?: ViewStyle;
  disabled?: boolean | undefined;
  onPress?: any;
  text?: string;
  bordered?: boolean;
  textStyle?: TextStyle;
  loading?: boolean;
}

const Button: FC<ButtonProps> = ({
  style,
  disabled,
  onPress,
  text,
  bordered,
  textStyle,
  loading,
}) => {
  const { OS } = Platform;
  return (
    <TouchableOpacity
      activeOpacity={0.6}
      disabled={disabled || false}
      onPress={onPress}
      style={{ ...styles({ disabled, bordered, OS }).button, ...style }}
    >
      <Text
        style={{ ...styles({ disabled, bordered }).buttonText, ...textStyle }}
      >
        {loading ? <ActivityIndicator color="white" size={30} /> : text}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;

interface StylesProps {
  bordered?: boolean;
  disabled?: boolean;
  OS?: string;
}

interface StyleSheetType {
  button: ViewStyle;
  buttonText: TextStyle;
}

type StylesFunctionProps = (props: StylesProps) => StyleSheetType;

const styles: StylesFunctionProps = ({ bordered, disabled, OS }) =>
  StyleSheet.create<StyleSheetType>({
    button: {
      borderRadius: OS === "ios" ? 17 : 20,
      backgroundColor: disabled ? colors.gray : bordered ? "white" : colors.red,
      paddingVertical: 15,
      alignItems: "center",
      borderWidth: bordered && !disabled ? 1 : 0,
      borderColor: colors.red,
    },
    buttonText: {
      fontSize: 20,
      // fontFamily: fonts.regular, // light
      color: bordered && !disabled ? colors.red : "white",
    },
  });

How to solve ViewStyle typescript error in react native?

2 Answers2