How to apply styles to react native component with array map

I can’t get the application to work due to errors, unfortunately I did not find a solution on the Internet, so I ask here, what is the error?

This is my App.js code:

const users = [
    {
        name: 'Benedict Cumberbatch',
        phone: '+1 17 327 13 89',
        total: 91
    },
    {
        name: 'John Wick',
        phone: '+4 77 623 76 89',
        total: -98
    },
    {
        name: 'Ryan Thomas Gosling',
        phone: '+1 37 717 24 11',
        total: 3902
    }
];

const Footer = () => {
  return 'wefwefwefwe';
};

const BackButton = () => {
  return '<Button title="Back">';
}

const Users = () => {
    let userIconLetter = 'A';

    return users.map((user, index) => {
        return (
            <div style={styles.userCard} key={index}>
                <div style={styles.userIcon}>
                    <span style={styles.userIconLetter}>
                        {userIconLetter}
                    </span>
                </div>
                <div style={styles.userData}>
                    <div style={styles.userName}>
                        {user.name}
                    </div>
                    <div style={styles.userPhone}>
                        {user.phone}
                    </div>
                </div>
                <div style={styles.userValue(props.props.total > 0)}>
                    {user.total}
                </div>
            </div>
        )
    })
}

export default function App() {
  return (
    <View style={styles.container}>
        <ScrollView>
            <Users />
        </ScrollView>
        <Footer>
            <BackButton style={styles.navigationButton} />
        </Footer>
    </View>
  );
}

and main.js in styles:

import { StyleSheet} from 'react-native';
const styles = StyleSheet.create({
    container: {
        flex: 1,
        fontFamily: "'Roboto', sans-serif",
    },
    navigationButton: {
        padding: "10px 15px",
    },
    userIcon: {
        width: "50px",
        height: "50px"
    },
    userCard: {
        color: 'black'
    },
    userIconLetter: {
        color: 'black'
    },
    userData: {
        color: 'black'
    },
    userName: {
        color: 'black'
    },
    userPhone: {
        color: 'black'
    },
    userValue: (positive) => {
        let color = positive ? 'green' : 'red';
    
        return {
            color: color,
        };
    },
})

export { styles }

I’ve got errors for every user block:

The above error occurred in the component:

div div div Users div
./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19
div
./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19
./node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js/ScrollViewBase<@http://localhost:19006/static/js/bundle.js:32894:18
ScrollView ScrollView div
./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19
App
ExpoRootComponent@http://localhost:19006/static/js/bundle.js:4196:83
div
./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19
div
./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19
AppContainer@http://localhost:19006/static/js/bundle.js:32304:18

Consider adding an error boundary to your tree to customize error
handling behavior. Visit https://reactjs.org/link/error-boundaries to
learn more about error boundaries.

And one error at the end:

Uncaught Error: The style prop expects a mapping from style
properties to values, not a string. For example, style={{marginRight:
spacing + ’em’}} when using JSX.