CODEWITHSUNDEEP
react-native
Cruse
Cruse

Reputation: 615

How to apply two different styles in View component in React native

I am working on a React native project, I am trying to apply two different styles in View Component but it is taking only one style someone please tell me how to overcome this issue

This is App.js

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

const App = props => {
  return (
    <View style={{flex: 1, flexDirection: 'row'}} style={styles.container}>
      <Text>Mark</Text>
      <Text>Williams</Text>
      <Text>Henry</Text>
      <Text>Tom</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 0,
    padding: 20,
    color: '#ff0000',
  },
});

export default App;

Upvotes: 0

Views: 920

Answers (1)

EL173
EL173

Reputation: 815

Hi try like below,

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

const App = props => {
  return (
    <View style={[{flex: 1, flexDirection: 'row'}, styles.container]}>
      <Text>Mark</Text>
      <Text>Williams</Text>
      <Text>Henry</Text>
      <Text>Tom</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 0,
    padding: 20,
    color: '#ff0000',
  },
});

export default App;

Using a style array you can set multiple styles for a same component.

Upvotes: 1

Related Questions