Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Create Generic Custom Component React

$
0
0

This is react-native question but similar concepts can be applied to react.

I want to create a CustomView in react-native. I am using typescript.

So far, I have:

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    borderRadius: 10,
  }
});

type CustomViewProps= {
  width: number,
  height: number,
  marginTop?: string | number,
}

const CustomView = ({ width, height, marginTop }: CustomViewProps) => (
  <View style={[styles.container, { height, width, marginTop }]} />
);

This is ok so far because only 3 props are being used: width, height and marginTop.

However, this is not reusable and it can become verbose if I need to add many more props.

So, the question is: How can I make CustomView receive any props as a native component View could receive?

My guess is I should delete CustomViewProps. Then, I should make the props inherit from the same type that the native component View does. However, I am struggling with it.


Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>