jsdario
Reputation: 6853
How do I know if my code is running as React Native
I want to be able to export a package for all platforms, but I am using some native bindings with a plain JS fallback. Normally I would notice the difference
checking if object window or exports exist.
How can I achieve this on React Native?
Upvotes: 19
Views: 10397
Answers (6)
Suhayb Quusha
Reputation: 1
import React, { useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity }
from 'react-native';
export default function App() {
// State variables
const [displayValue, setDisplayValue] = useState('0');
const [operator, setOperator] = useState(null);
const [firstValue, setFirstValue] = useState('');
// Function to handle number inputs
const handleNumberInput = (num) => {
if (displayValue === '0') {
setDisplayValue(num.toString());
} else {
setDisplayValue(displayValue + num);
}
};
// Function to handle operator inputs
const handleOperatorInput = (operator) => {
setOperator(operator);
setFirstValue(displayValue);
setDisplayValue('0');
};
// Function to handle equal button press
const handleEqual = () => {
const num1 = parseFloat(firstValue);
const num2 = parseFloat(displayValue);
if (operator === '+') {
setDisplayValue((num1 + num2).toString());
} else if (operator === '-') {
setDisplayValue((num1 - num2).toString());
} else if (operator === '*') {
setDisplayValue((num1 * num2).toString());
} else if (operator === '/') {
setDisplayValue((num1 / num2).toString());
}
setOperator(null);
setFirstValue('');
};
// Function to handle clear button press
const handleClear = () => {
setDisplayValue('0');
setOperator(null);
setFirstValue('');
};
return (
<View style={styles.container}>
<View style={styles.displayContainer}>
<Text style={styles.displayText}>
{displayValue}
</Text>
</View>
<View style={styles.buttonContainer}>
<View style={styles.row}>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(7)}
>
<Text style={styles.buttonText}>7</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(8)}
>
<Text style={styles.buttonText}>8</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(9)}
>
<Text style={styles.buttonText}>9</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.operatorButton]}
onPress={() => handleOperatorInput('/')}
>
<Text style={[
styles.buttonText,
styles.operatorButtonText
]}>
÷
</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(4)}
>
<Text style={styles.buttonText}>4</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(5)}
>
<Text style={styles.buttonText}>5</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(6)}
>
<Text style={styles.buttonText}>6</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.operatorButton]}
onPress={() => handleOperatorInput('*')}
>
<Text style={[
styles.buttonText,
styles.operatorButtonText
]}>
×
</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(1)}
>
<Text style={styles.buttonText}>1</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(2)}
>
<Text style={styles.buttonText}>2</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleNumberInput(3)}
>
<Text style={styles.buttonText}>3</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.operatorButton]}
onPress={() => handleOperatorInput('-')}
>
<Text style={[
styles.buttonText,
styles.operatorButtonText
]}>
−
</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity
style={[styles.button, styles.zeroButton]}
onPress={() => handleNumberInput(0)}
>
<Text style={[
styles.buttonText,
styles.zeroButtonText
]}>
0
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.operatorButton]}
onPress={() => handleOperatorInput('+')}
>
<Text style={[
styles.buttonText,
styles.operatorButtonText
]}>
+
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.equalButton}
onPress={handleEqual}
>
<Text style={styles.equalButtonText}>=</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.clearButton}
onPress={handleClear}>
<Text style={styles.clearButtonText}>C</Text>
</TouchableOpacity>
</View>
</View>
);
}
// Styles const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
alignItems: 'center',
justifyContent: 'center',
},
displayContainer: {
flex: 2,
justifyContent: 'flex-end',
alignItems: 'flex-end',
padding: 20,
},
displayText: {
fontSize: 48,
color: '#333',
},
buttonContainer: {
flex: 3,
width: '80%',
},
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 10,
},
button: {
flex: 1,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
elevation: 3,
margin: 2,
padding: 15,
},
buttonText: {
fontSize: 34,
color: '#333',
},
zeroButton: {
flex: 2,
paddingLeft: 35,
paddingRight: 35,
},
zeroButtonText: {
marginLeft: 10,
},
operatorButton: {
backgroundColor: '#f0f0f0',
},
operatorButtonText: {
color: '#ff9500',
},
equalButton: {
flex: 1,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ff9500',
elevation: 3,
},
equalButtonText: {
fontSize: 32,
color: '#fff',
},
clearButton: {
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f0f0f0',
marginTop: 10,
elevation: 3,
padding: 10,
},
clearButtonText: {
fontSize: 24,
color: '#333',
},
});
Upvotes: 0
maks-io
Reputation: 56
Based on some answers here mentioning that navigator.product is deprecated plus others talking about "file overrides", I've built my own small helper library (who-am-i-now), where I am successfully doing exactly that, using file overrides plus trying to require certain dependencies etc.
It has been very helpful for me in recent days, feel free to also use it or just check the source code for details on the underlying mechanism.
Upvotes: 1
Youzef
Reputation: 858
Use
import { Platform } from 'react-native'
if ( Platform.OS !== 'web' ) {
// Do something
}
Upvotes: 0
BradByte
Reputation: 11093
Here is how to check if code is on web, nodejs, or react-native:
if (typeof document !== 'undefined') {
// I'm on the web!
}
else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
// I'm in react-native
}
else {
// I'm in node js
}
Sources:
- What causes node to return 'navigator is not defined'
- Add way to detect react-native (and platform) without require().
- React Native support is broken
Upvotes: 41
Roy Alcala
Reputation: 1
crete two files: one called file.web.js, and other file.native.js, and import only the first name segment'./yourdirectories/file'
Upvotes: 0
Mike Grabowski
Reputation: 1965
Not sure if I understood your question properly, but what we've been doing so far to address all the platforms and have React Native overrides was to have:
-- file.js
-- file.android.js
-- file.ios.js
with just a plain
require('./file');
so that based on the env (Node / React Native) a proper file is loaded transparently.
Upvotes: 1
Related Questions
- How to check react-native version of project?
- How do I detect if the app uses React Native, given APK file?
- How to check the installed version of React-Native
- Is there way to check react native app version?
- React Native: How can I detect if my code is running in the Simulator?
- How can I tell if something was written with react vs. react native?
- Detect if using nextJS, react or react-native
- How to get react native version from JavaScript?
- Find which version of reactJS does react-native use?
- Is there a way in react to tell if it is react native or web?