React Native Styling doesn’t work unless it’s inline

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;