'material community icons, setting the size causes android to crash?

I have no idea why setting the size like I am on line 38 is causing the android app to crash. If you take the size away, it works perfectly fine. I have all of the scales commented out because I thought it could be something with them.

I would greatly appreciate any insight at all! Thank you!!!

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

export default function HomeScreen() {
  return (
    <LinearGradient
      colors={['#FF0093', '#272933', '#272933']}
      style={styles.container}>
     
    <TouchableOpacity>
     <View style={{flexDirection: 'row', /*top: scale(150)*/}}>
        <View style = {{/*paddingLeft: scale(10)*/}}>
            <MaterialCommunityIcons 
                name="account-outline" color='white' size='50'>
            </MaterialCommunityIcons>
        </View>
        <View style = {{justifyContent: 'center', /*paddingLeft: scale(20)*/}}>
            <Text style={styles.accountPlaceholder} >
               Click for Account Settings 
            </Text>
        </View>
        <View style = {{/*paddingLeft: scale(20)*/ justifyContent: 'center'}}>
            <MaterialCommunityIcons 
                name="chevron-right" color='white' >
            </MaterialCommunityIcons>
        </View>
      </View>
      </TouchableOpacity>
      {/* End of Click for Accoutn Settings */}

      {/* Beginning of Click to Sign Up*/}
      <TouchableOpacity>
      <View style={{flexDirection: 'row', /*top: scale(150)*//* paddingTop: scale(30)*/}}>
        <View style = {{/*{paddingLeft: scale(15)*/}}>
            <MaterialCommunityIcons 
                name="logout" color='white' >
            </MaterialCommunityIcons>
        </View>
        <View style = {{justifyContent: 'center',/* paddingLeft: scale(15)*/}}>
            <Text style={styles.accountPlaceholder} >
               Click to Sign Out 
            </Text>
        </View>
        <View style = {{/*paddingLeft: scale(92*)*/ justifyContent: 'center'}}>
            <MaterialCommunityIcons 
                name="chevron-right" color='white' >
            </MaterialCommunityIcons>
        </View>
      </View>
      </TouchableOpacity>
      {/* End of Click to Sign up */}

    </LinearGradient>
  );
}
cssreactjsreact-native


Solution 1:[1]

Use size as an integer, like:

size={50}

whereas you are using size as a string:

size='50'

Solution 2:[2]

Note that this is also true for margin styling.

Use

margin:20

and not

margin:"20"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Munalula Sikazwe

Related Questions