CODEWITHSUNDEEP
react-native
jjjjjjjj
jjjjjjjj

Reputation: 4503

Styling custom component in react native

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

Upvotes: 4

Views: 10606

Answers (5)

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

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

Upvotes: 21

Mostafa Norzade
Mostafa Norzade

Reputation: 1776

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.

Upvotes: 1

Saurabh Jain
Saurabh Jain

Reputation: 79

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.

Upvotes: 0

Paras Korat
Paras Korat

Reputation: 2065

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

Upvotes: 3

Rengers
Rengers

Reputation: 15238

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>
);

Upvotes: -1

Related Questions