Images · React Native
Static Image Resources React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this: The image name is resolved the same way JS modules are resolved. In the example above, the bundler will look for my-icon.png in the same folder as the component
Share · React Native
static share(content: ShareContent, options?: ShareOptions); Open a dialog to share text content. In iOS, returns a Promise which will be invoked with an object containing action and activityType. If the user dismissed the dialog, the Promise will still be resolved with action being Share.dismissedAction and all the other keys being undefined. Note that some share options will not appear or work o
Native Modules NPM Package Setup · React Native
Native Module and Native Components are our stable technologies used by the legacy architecture. They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses Turbo Native Module and Fabric Native Components to achieve similar results. Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include som
KeyboardAvoidingView · React Native
This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed. Example Reference Props View Props Inherits View Props. behavior Specify how to react to the presence of the keyboard. Android and iOS both interact with this prop differently. On both iOS and Android, setting behavior is recom
Systrace · React Native
Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize. Example Systrace allows you to mark JavaScript (JS) events w
Navigating Between Screens · React Native
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use React Navigation. React Navigation provides a straightforward navigatio
Dimensions · React Native
Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet). If you are targeting foldable devices or devices which can cha
PixelRatio · React Native
PixelRatio class gives access to the device pixel density. Fetching a correctly sized image You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio. var image = getImage({ width: PixelRatio.getPixelSizeForLayoutSize(200), height: PixelRatio.getPixelSizeForLayoutSize(100), }); <Image
PanResponder · React Native
PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures. It provides a predictable wrapper of the responder handlers provided by the gesture responder
Accessibility · React Native
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform. Accessibility properties accessible When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible. On Android, accessible={true}
App Extensions · React Native
App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the App Extension Programming Guide. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS. Memory use in extensions As these extensions are loaded outside of the regular app sandbox, it's highly
Direct Manipulation · React Native
It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node. Use setNativeProps when freq
Gesture Responder System · React Native
The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches. The touch responder system is ne
🚧 DatePickerIOS · React Native
Removed. Use one of the community packages instead. Use DatePickerIOS to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the source of truth. Example Reference Props Inherits
PixelRatio · React Native
PixelRatio gives you access to the device's pixel density and font scale. Fetching a correctly sized image You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio. const image = getImage({ width: PixelRatio.getPixelSizeForLayoutSize(200), height: PixelRatio.getPixelSizeForLayoutSiz
SectionList · React Native
A performant interface for rendering sectioned lists, supporting the most handy features: Fully cross-platform. Configurable viewability callbacks. List header support. List footer support. Item separator support. Section header support. Section separator support. Heterogeneous data and item rendering support. Pull to Refresh. Scroll loading. If you don't need section support and want a simpler in
TouchableNativeFeedback · React Native
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with anoth
TouchableWithoutFeedback · React Native
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched. TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View. Importantly, TouchableWithoutFeedback w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
🚧 Picker · React Native
🚧 Clipboard · React Native