I simply have 2 text elements that I want to style but giving them css via style file doesn’t change anything. However when I gave them inline css it works. I removed everything in case there are some conflicts but it still doesn’t work and here’s the whole file;
index.js
/* eslint-disable no-const-assign */
import React from 'react';
import { View, Text } from 'react-native';
import styles from './style';
/**
* creates a video screen view
*
* @param {object} props - props
* @param {object} props.route - current route object
* @returns {module:JSX.Element} - JSX.Element
*/
const Video = ({ route }) => {
return (
<View style={styles.stoppedContainer}>
<View>
<Text style={styles.redText}>Top</Text>
</View>
<View>
<Text>Bottom</Text>
</View>
</View>
);
};
export default Video;
Here’s the css
style.js
import { StyleSheet } from 'react-native';
/**
* @returns {object} - object
*/
const styles = () => {
return StyleSheet.create({
stoppedContainer: {
flex: 1,
display: 'flex',
flexDirection: 'column-reverse',
},
redText: {
color: 'red',
fontSize: 30,
},
});
};
export default styles;