---- url: https://reactnative.dev/docs/next/the-new-architecture/create-module-library ---- [Skip to main content](#__docusaurus_skipToContent_fallback) This is unreleased documentation for React Native **Next** version. For up-to-date documentation, see the **[latest version](/docs/the-new-architecture/create-module-library)** (0.87). Version: Next ``` npx create-react-native-library@latest ``` ``` "codegenConfig": { "name": "RNSpec", "type": "all", "jsSrcsDir": "src", "outputDir": { "ios": "ios/generated", "android": "android/generated" }, "android": { "javaPackageName": "com." } }, ``` Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android. ### 2. Copy the Code over from Your App[​](#2-copy-the-code-over-from-your-app "Direct link to 2. Copy the Code over from Your App") The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](/docs/next/the-new-architecture/pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. 1. **\[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: TypeScript ``` import NativeSampleModule from './NativeSampleModule'; export default NativeSampleModule; ``` ``` Development ├── App └── Library ``` You can use the library created with `create-react-native-library` also in this case. 1. add you library to your app by navigating into the `App` folder and running `yarn add ../Library`. 2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies. 3. Update the `App.tsx` code to import the code in your library. For example: React TSX ``` import NativeSampleModule from '../Library/src/index'; ``` If you run your app right now, Metro would not find the JS files that it needs to serve to the app. That's because metro will be running starting from the `App` folder and it would not have access to the JS files located in the `Library` folder. To fix this, let's update the `metro.config.js` file as it follows Diff ``` const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); /** * Metro configuration * https://reactnative.dev/docs/metro * * @type {import('metro-config').MetroConfig} */ + const path = require('path'); - const config = {} + const config = { + // Make Metro able to resolve required external dependencies + watchFolders: [ + path.resolve(__dirname, '../Library'), + ], + resolver: { + extraNodeModules: { + 'react-native': path.resolve(__dirname, 'node_modules/react-native'), + }, + }, +}; module.exports = mergeConfig(getDefaultConfig(__dirname), config); ``` ``` npm view ``` where `package.name` is the `name` you set up in the `package.json` file during the initialization of the library. Now, you can install the library in your application by running: ``` yarn add ``` ---- url: https://reactnative.dev/docs/next/layoutanimation ---- [Skip to main content](#__docusaurus_skipToContent_fallback) This is unreleased documentation for React Native **Next** version. For up-to-date documentation, see the **[latest version](/docs/layoutanimation)** (0.87). Version: Next Automatically animates views to their new positions when the next layout happens. A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components. note On **Android**, when using the **Legacy Architecture**, you need to enable layout animations via `UIManager`. This flag enables layout animations globally and only needs to be called once (for example, in your app's root entry file `index.js` or root component) before triggering any layout animation: JavaScript ``` if (Platform.OS === 'android') { if (UIManager.setLayoutAnimationEnabledExperimental) { UIManager.setLayoutAnimationEnabledExperimental(true); } } ``` On the **New Architecture**, layout animations are enabled automatically, and calling `setLayoutAnimationEnabledExperimental` is unnecessary (it is a no-op). ## Example[​](#example "Direct link to Example") *** # Reference ## Methods[​](#methods "Direct link to Methods") ### `configureNext()`[​](#configurenext "Direct link to configurenext") React TSX ``` static configureNext( config: LayoutAnimationConfig, onAnimationDidEnd?: () => void, onAnimationDidFail?: () => void, ); ``` Schedules an animation to happen on the next layout. #### Parameters:[​](#parameters "Direct link to Parameters:") | Name | Type | Required | Description | | ------------------ | -------- | -------- | ----------------------------------- | | config | object | Yes | See config description below. | | onAnimationDidEnd | function | No | Called when the animation finished. | | onAnimationDidFail | function | No | Called when the animation failed. | The `config` parameter is an object with the keys below. [`create`](/docs/next/layoutanimation#create) returns a valid object for `config`, and the [`Presets`](/docs/next/layoutanimation#presets) objects can also all be passed as the `config`. * `duration` in milliseconds * `create`, optional config for animating in new views * `update`, optional config for animating views that have been updated * `delete`, optional config for animating views as they are removed The config that's passed to `create`, `update`, or `delete` has the following keys: * `type`, the [animation type](/docs/next/layoutanimation#types) to use * `property`, the [layout property](/docs/next/layoutanimation#properties) to animate (optional, but recommended for `create` and `delete`) * `springDamping` (number, optional and only for use with `type: Type.spring`) * `initialVelocity` (number, optional) * `delay` (number, optional) * `duration` (number, optional) *** ### `create()`[​](#create "Direct link to create") React TSX ``` static create(duration, type, creationProp) ``` Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](/docs/next/layoutanimation#configurenext). The `type` parameter is an [animation type](/docs/next/layoutanimation#types), and the `creationProp` parameter is a [layout property](/docs/next/layoutanimation#properties). **Example:** ## Properties[​](#properties "Direct link to Properties") ### Types[​](#types "Direct link to Types") An enumeration of animation types to be used in the [`create`](/docs/next/layoutanimation#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](/docs/next/layoutanimation#configurenext). (example usage: `LayoutAnimation.Types.easeIn`) | Types | | ------------- | | spring | | linear | | easeInEaseOut | | easeIn | | easeOut | | keyboard | *** ### Properties[​](#properties-1 "Direct link to Properties") An enumeration of layout properties to be animated to be used in the [`create`](/docs/next/layoutanimation#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](/docs/next/layoutanimation#configurenext). (example usage: `LayoutAnimation.Properties.opacity`) | Properties | | ---------- | | opacity | | scaleX | | scaleY | | scaleXY | *** ### Presets[​](#presets "Direct link to Presets") A set of predefined animation configs to pass into [`configureNext`](/docs/next/layoutanimation#configurenext). | Presets | Value | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')` | | linear | `create(500, 'linear', 'opacity')` | | spring | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` | *** ### `easeInEaseOut`[​](#easeineaseout "Direct link to easeineaseout") Calls `configureNext()` with `Presets.easeInEaseOut`. *** ### `linear`[​](#linear "Direct link to linear") Calls `configureNext()` with `Presets.linear`. *** ---- url: https://reactnative.dev/docs/next/the-new-architecture/layout-measurements ---- [Skip to main content](#__docusaurus_skipToContent_fallback) This is unreleased documentation for React Native **Next** version. For up-to-date documentation, see the **[latest version](/docs/the-new-architecture/layout-measurements)** (0.87). Version: Next Sometimes, you need to measure the current layout to apply some changes to the overall layout or to make decisions and call some specific logic. React Native provides some native methods to know what are the measurements of the views. The best way to invoke those methods is in a `useLayoutEffect` hook: this will give you the most recent values for those measurements and it will let you apply changes in the same frame when the measurements are computed. Typical code will look like this: React TSX ``` function AComponent(children) { const targetRef = useRef(null) useLayoutEffect(() => { targetRef.current?.measure((x, y, width, height, pageX, pageY) => { //do something with the measurements }); }, [ /* add dependencies here */]); return ( {children} ); } ``` ---- url: https://reactnative.dev/docs/upgrading ---- [Skip to main content](#__docusaurus_skipToContent_fallback) ``` # {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff npm install react-native@{{VERSION}} npm install react@{{REACT_VERSION}} ``` ``` # {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff yarn add react-native@{{VERSION}} yarn add react@{{REACT_VERSION}} ``` ---- url: https://reactnative.dev/docs/next/intro-react ---- [Skip to main content](#__docusaurus_skipToContent_fallback) This is unreleased documentation for React Native **Next** version. For up-to-date documentation, see the **[latest version](/docs/intro-react)** (0.87). Version: Next ``` import {Text} from 'react-native'; ``` Your component starts as a function: React TSX ``` const Cat = () => {}; ``` You can think of components as blueprints. Whatever a function component returns is rendered as a **React element.** React elements let you describe what you want to see on the screen. Here the `Cat` component will render a `` element: React TSX ``` const Cat = () => { return Hello, I am your cat!; }; ``` You can export your function component with JavaScript’s [`export default`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) for use throughout your app like so: React TSX ``` const Cat = () => { return Hello, I am your cat!; }; export default Cat; ``` You’ve already met [React Native’s Core Components](/docs/next/intro-react-native-components). React lets you nest these components inside each other to create new components. These nestable, reusable components are at the heart of the React paradigm. For example, you can nest [`Text`](/docs/next/text) and [`TextInput`](/docs/next/textinput) inside a [`View`](/docs/next/view) below, and React Native will render them together: #### Developer notes[​](#developer-notes "Direct link to Developer notes") * Android * Web info If you’re familiar with web development, `` and `` might remind you of HTML! You can think of them as the `
` and `

` tags of application development. info On Android, you usually put your views inside `LinearLayout`, `FrameLayout`, `RelativeLayout`, etc. to define how the view’s children will be arranged on the screen. In React Native, `View` uses Flexbox for its children’s layout. You can learn more in [our guide to layout with Flexbox](/docs/next/flexbox). Most of React Native’s Core Components can be customized with props, too. For example, when using [`Image`](/docs/next/image), you pass it a prop named [`source`](/docs/next/image#source) to define what image it shows: `Image` has [many different props](/docs/next/image#props), including [`style`](/docs/next/image#style), which accepts a JS object of design and layout related property-value pairs. note Notice the double curly braces `{{ }}` surrounding `style`‘s width and height. In JSX, JavaScript values are referenced with `{}`. This is handy if you are passing something other than a string as props, like an array or number: ``. However, JS objects are ***also*** denoted with curly braces: `{width: 200, height: 200}`. Therefore, to pass a JS object in JSX, you must wrap the object in **another pair** of curly braces: `{{width: 200, height: 200}}` You can build many things with props and the Core Components [`Text`](/docs/next/text), [`Image`](/docs/next/image), and [`View`](/docs/next/view)! But to build something interactive, you’ll need state. ``` import {useState} from 'react'; ``` Then you declare the component’s state by calling `useState` inside its function. In this example, `useState` creates an `isHungry` state variable: React TSX ``` const Cat = (props: CatProps) => { const [isHungry, setIsHungry] = useState(true); // ... }; ``` tip You can use `useState` to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with `const [timesPetted, setTimesPetted] = useState(0)`! Calling `useState` does two things: * it creates a “state variable” with an initial value—in this case the state variable is `isHungry` and its initial value is `true` * it creates a function to set that state variable’s value—`setIsHungry` It doesn’t matter what names you use. But it can be handy to think of the pattern as `[, ] = useState()`. Next you add the [`Button`](/docs/next/button) Core Component and give it an `onPress` prop: React TSX ```