Styling custom component in 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>
    )
  }
}

can you show me code of custom component?

Paras Korat
– Paras Korat

2019-04-15 09:33:48 +00:00
Commented Apr 15, 2019 at 9:33 — Paras Korat
– Paras Korat, Commented Apr 15, 2019 at 9:33
style your MyCustomComponent to container view

Hardik Virani
– Hardik Virani

2019-04-15 09:38:54 +00:00
Commented Apr 15, 2019 at 9:38 — Hardik Virani
– Hardik Virani, Commented Apr 15, 2019 at 9:38

Pavel Chuchuva · Accepted Answer · 2022-04-08 23:04:04Z

20

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

edited Apr 8, 2022 at 23:04

Pavel Chuchuva

22.6k11 gold badges103 silver badges119 bronze badges

answered Apr 15, 2019 at 10:19

Ali SabziNezhad

3,1081 gold badge20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HarshitMadhav · Accepted Answer · 2020-01-01 07:59:36Z

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

edited Jan 1, 2020 at 7:59

HarshitMadhav

5,1196 gold badges40 silver badges47 bronze badges

answered Apr 15, 2019 at 9:37

Paras Korat

2,0853 gold badges20 silver badges36 bronze badges

Comments

Mostafa Norzade · Accepted Answer · 2020-12-31 06:55:01Z

1

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.

answered Dec 31, 2020 at 6:55

Mostafa Norzade

1,7865 gold badges28 silver badges41 bronze badges

Comments

SomoKRoceS · Accepted Answer · 2020-07-03 00:10:02Z

0

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.

edited Jul 3, 2020 at 0:10

SomoKRoceS

3,0733 gold badges24 silver badges33 bronze badges

answered Jul 2, 2020 at 23:31

Saurabh Jain

791 silver badge7 bronze badges

Comments

Rengers · Accepted Answer · 2019-04-15 09:37:17Z

-1

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

answered Apr 15, 2019 at 9:37

Rengers

15.2k1 gold badge40 silver badges56 bronze badges

Collectives™ on Stack Overflow

Styling custom component in react native

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related