When creating a reusable component in React, how do I pass all other props to be accessible later when the component is being used? - React native

vik
September 9, 2022
181 views
0 votes
2 Answers

I’m creating some custom components for my application and they essentially have some base styling done to them for light/dark modes. My goal is to be able to use those components with all their props later when the custom component is being used to stay flexible. How do I achieve this?

For example if I style a custom input component and use it, I want to be able to tap into the secureTextEntry prop when needed. Here is an example of what I have right now for my CustomText. I want to be able to style this further when needed.

import { Text, useColorScheme } from 'react-native';
import React from 'react';

type CustomTextProps = {
  text: string;
};

const CustomText = ({ text }: CustomTextProps) => {
  const isDarkMode = useColorScheme() === 'dark';

  return <Text style={{ color: isDarkMode ? '#fff' : '#000' }}>{text}</Text>;
};

export default CustomText;

Answers

- HasanAga
- September 9, 2022 at 8:45 pm
- 0 votes
0
This sounds like a job for React Context which acts as a store for global state that you can access using useContext hook

Login or Signup to reply.

- YarinBarnes
- September 9, 2022 at 9:06 pm
- 0 votes
0
react-native expose interfaces for each component.
so you need to extend your interface with TextProps:
```
import { Text, TextProps } from 'react-native';

interface CustomTextProps extends TextProps {
  text: string;
};
```
By extending those interfaces (e.g. TextProps) in CustomTextProps we can have all text element props passed to this component.

Instead of having to declare each one we can just use a spread attribute ...rest
```
const CustomText = ({ text, ...rest }: CustomTextProps) => {
  const isDarkMode = useColorScheme() === 'dark';

  return <Text style={{ color: isDarkMode ? '#fff' : '#000' }} {...rest}>{text}</Text>;
};

export default CustomText;
```
Login or Signup to reply.