Programming Tutorials

export in React Native - JavaScript

By: Faizal in React-Native Tutorials on 2023-04-07  

In JavaScript, the export keyword is used to export a function, object, or value from a module so that it can be imported and used in other modules. In React Native, you can use the export keyword to export components, functions, or variables from a JavaScript file.

For example, let's say you have a Button component in a file called CustomButton.js. You can export it like this:

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

const CustomButton = (props) => {
  const { onPress, title } = props;
  return (
    <TouchableOpacity onPress={onPress}>
<Text>{title}</Text>
</TouchableOpacity> ); }; export default CustomButton;

Here, the CustomButton component is defined and then exported using the export default syntax. This means that when you import this module in another file, the CustomButton component will be the default export and can be used by importing it like this:

import CustomButton from './CustomButton';

You can also use named exports by exporting individual functions, objects, or values using the export keyword without the default keyword. For example:

export const myFunction = () => {
  // ...
};

export const myValue = 'some value';

And you can import these named exports using their exact names in another file:

import { myFunction, myValue } from './myModule';





Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Remove all installed dependencies and install them again

use axios in Expo to call APIs

Start background location tracking after login in expo react native

'import' and 'export' may only appear at the top level - React Native

Session variables in React Native - Expo

react-native-background-job alternative in expo app

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

set up a global error handler in React Native (expo)

Error Handling in TextInput - React Native

Some dependencies are incompatible with the installed expo version:

react-native-android-location-services-dialog-box alternative in expo

loadAsync() vs useFonts() in expo - react native

npm install vs npx expo install

flexDirection in React Native

expo-secure-store to store sensitive data securely in React Native

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native