Styling custom component in react native - react-native

Question

I am trying to add styling to my custom component in react native, but no matter what I do, the style has no effect. Here is my code:
// App.js
import MyCustomComponent from './components/myCustomComponent.js';
render() {
return (
<View style={styles.container}>
<MyCustomComponent style={{marginTop: 10}}/>
</View>
);
}
The project compiles fine, and my custom component appears on screen fine, but the marginTop styling is not applied. It is worth noting that the style for the parent View component does apply correctly. This is a brand new project I just created today. This seems like it should be extremely basic, but just isn't working. What can I do to apply this styling?
Custom component code:
import React, {Component} from 'react';
import {TextInput, StyleSheet, Image, View, Button} from 'react-native';
type Props = {};
export default class MyCustomComponent extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "source here" }}
style={{ width: 50, height: 50 }}
/>
<TextInput
style={{ height: 50 }}
placeholder="Search"
/>
</View>
)
}
}

Answer 1

you can use this code:
export default class MyCustomComponent extends Component<Props> {
render() {
return (
<View style={[styles.container, {...this.props.style}]}>
...
</View>
)
}
}
now, styles.container is applied and anything you pass to component through style will be added to component style.
I hope this can help you

Answer 2

You can apply a style to your custom component by passing style as props.
and
Use it as style={this.props.style} in your MyCustomComponent.
import React, {Component} from 'react';
import {TextInput, StyleSheet, Image, View, Button} from 'react-native';
type Props = {};
export default class MyCustomComponent extends Component<Props> {
render() {
return (
<View style={[styles.container,{...this.props.style}]}>//<--Use like this---
<Image
source={{ uri: "source here" }}
style={{ width: 50, height: 50 }}
/>
<TextInput
style={{ height: 50 }}
placeholder="Search"
/>
</View>
)
}
}

Answer 3

add this code in your CustomText.js file (custom component):
import React from 'react'
import {Text, StyleSheet} from 'react-native'
const CustomText = props => {
return (<Text {...props} style={{...styles.text, ...props.style}}>{props.children}</Text>);
}
export default CustomText;
const styles = StyleSheet.create({
text:{
color: '#000'
}
})
and use in the file:
<CustomText style={styles.text}>My text</CustomText>
const styles = StyleSheet.create({
text:{
fontSize: 20,
}
});
this code merge styles and pass all property to the custom components.

Answer 4

For example, lets change background color of custom card.
Custom Card:
export default function MyCard({color}) {
return (
<View style={[styles.card, {backgroundColor: color}]}>
</View>
)
}
In another file
<MyCard color={"pink"} />
Here, styles.card is the style added in Custom Card file and the color is given during component use.
Note: MyCard({color}) if you miss to add highlight parentheses, it will not work. I faced this issue.

Answer 5

You need to apply this style yourself inside MyCystomComponent. For example:
const MyCustomComponent = ({style}) => (
<View style={style}> // This will be the style that is passed as a prop.
</View>
);