Missing semicolon

[esien525]

Hi, I'm stuck with this issue in RNW and have no clue how to fix it. Anyone can guide me? However, it is 'working' in React-Native android with missing icon.

React-Native-Web

React-Native (Android)

Checkbox.js

import React from 'react'
import Icon from 'react-native-vector-icons/MaterialIcons'

import { TouchableOpacity, Text } from 'react-native'

const CheckBox = ({ selected, onPress, style, textStyle, size = 30, color = '#211f30', text = '', ...props}) => (
    <TouchableOpacity style={[styles.checkBox, style]} onPress={onPress} {...props}>
        <Icon
            size={size}
            color={color}
            name={ selected ? 'check-box' : 'check-box-outline-blank'}
        />

        <Text style={textStyle}> {text} </Text>
    </TouchableOpacity>
)

const styles = StyleSheet.create({
    checkBox: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})

export default CheckBox

Login.js

import { CheckBox } from '@components/checkBox'
...
<View style={styles.checkboxContainer}>
                <View style={{flex: 1}}>
                    <CheckBox 
                        selected={rm} 
                        onPress={handleCheckBox}
                        text='Remember Me'
                    />
                    {/* <Text>Remember Me</Text> */}
                </View>
                <View style={{flex: 1}}>
                    <Link to={{ screen: 'Feed', params: { itemId: 9 } }} style={{color:'blue', textAlign: 'right'}}>
                        Forget Password?
                    </Link>
                </View>
            </View>

Webpack.js

[esien525]

I found a solution.

Webpack,js (comment out the path.resolve(appDirectory, 'node_modules/react-native-vector-icons')

Checkbox.js using import Icon from 'react-native-vector-icons/dist/MaterialIcons'; instead

import React from 'react'
import Icon from 'react-native-vector-icons/dist/MaterialIcons';
import iconFont from 'react-native-vector-icons/Fonts/MaterialIcons.ttf';
import { TouchableOpacity, Text, StyleSheet, Platform } from 'react-native'

if (Platform.OS === 'web') {
    // Generate required css
    const iconFontStyles = `@font-face {
        src: url(${iconFont});
        font-family: MaterialIcons;
    }`;
    // Create stylesheet
    const style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = iconFontStyles;
    } else {
     style.appendChild(document.createTextNode(iconFontStyles));
    }

    // Inject stylesheet
    document.head.appendChild(style);
}

export const CheckBox = ({ selected, onPress, style, textStyle, size = 30, color = '#211f30', text = '', ...props}) => (
    <TouchableOpacity style={[styles.checkBox, style]} onPress={onPress} {...props}>
        <Icon
            size={size}
            color={color}
            name={ selected ? 'check-box' : 'check-box-outline-blank'}
        />

        <Text style={textStyle}> {text}</Text>
    </TouchableOpacity>
)

const styles = StyleSheet.create({
    checkBox: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})

Android https://github.com/oblador/react-native-vector-icons#option-manually