oblador
Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.
Software by oblador
react-native-vector-icons
 [](https://npmjs.com/package/@react-native-vector-icons/common) [](https://npmjs.com/package/@react-native-vector-icons/common) # React Native Vector Icons Elevate your React Native applications with the power of customizable vector icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these icons seamlessly integrate into your projects. Their versatility makes extension and styling effortless. For the integration of `.svg` files natively, you can explore [`react-native-vector-image`](https://github.com/oblador/react-native-vector-image). > [!TIP] > If you are still using the old single package `react-native-vector-icons` visit <https://github.com/oblador/react-native-vector-icons/tree/10.x>. To migrate to the package-per-icon-set approach, see [MIGRATION.md](MIGRATION.md). ## Table of Contents - [Sponsorship](#sponsorship) - [Available Icon Sets](#available-icon-sets) - [Installation](#installation) - [Setup](#setup) - [Icon Component](#icon-component) - [Usage as PNG Image/Source Object](#usage-as-png-imagesource-object) - [Multi-Style Fonts](#multi-style-fonts) - [Custom Fonts](#custom-fonts) - [Animation](#animation) - [Dynamic icon font loading](#dynamic-icon-font-loading) - [Usage Examples](#usage-examples) - [Changelog](https://github.com/oblador/react-native-vector-icons/releases) - [License](#license) ## Sponsorship Should you find this library beneficial, kindly contemplate the option of [sponsoring](https://github.com/sponsors/oblador). ## Available Icon Sets [Explore all icons](https://oblador.github.io/react-native-vector-icons/). RNVI comes with the following supported icons. You can [search NPM](https://www.npmjs.com/search?q=keywords%3Areact-native-vector-icons-icon) for third party icons. ### Actively maintained - [`AntDesign`](https://ant.design/components/icon) from Ant Group (v4.4.2 with _449_ icons) - [`Feather`](http://feathericons.com) created by Cole Bemis & Contributors (v4.29.2 featuring _287_ icons) - [`FontAwesome`](https://fontawesome.com/search) designed by Fonticons, Inc. (v7.2.0 featuring _2,806_ free and _75,767_ pro icons) - [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with _283_ icons) - [`Ionicons`](https://ionic.io/ionicons) crafted by Ionic (v8.0.9 containing _1,357_ icons) - [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/) from MaterialDesignIcons.com (v7.4.47 including _7448_ icons) - [`Octicons`](https://primer.style/foundations/icons) designed by GitHub, Inc. (v19.23.1 with _370_ icons) - [`Lucide`](https://lucide.dev/) designed by Lucide, (v1.7.0 with _1,941_ icons) ### No longer maintained upstream - [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with _411_ icons) - [`EvilIcons`](http://evil-icons.io) designed by Alexander Madyankin & Roman Shamin (v1.10.1 with _70_ icons) - [`FontAwesome 4`](https://fontawesome.com/v4/icons) by Fonticons, Inc. (v4.7.0 containing _785_ icons) - [`FontAwesome 5`](https://fontawesome.com/v5/search) from Fonticons, Inc. (v5.15.4 offering _1611_ free and _7869_ pro icons) - [`FontAwesome 6`](https://fontawesome.com/search) designed by Fonticons, Inc. (v6.7.2 featuring _2060_ free and _52663_ pro icons) - [`Fontisto`](https://github.com/kenangundogan/fontisto) created by Kenan Gündoğan (v3.0.4 featuring _617_ icons) - [`MaterialIcons`](https://fonts.google.com/icons?icon.set=Material+Icons) by Google, Inc. (v4.0.0 featuring _2234_ icons) - [`SimpleLineIcons`](https://simplelineicons.github.io/) crafted by Sabbir & Contributors (v2.5.5 with _189_ icons) - [`Zocial`](https://smcllns.github.io/css-social-buttons) by Sam Collins (v1.1.1 with _100_ icons) ## Migration See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-icons` to the package-per-icon-set approach or between major versions. ## Installation 1. Install the packages for the icons you want to use ```sh npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/evil-icons ``` 2. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below. 3. If you are using one of the following fonts, refer to their guides for further instructions - [Fontello](packages/fontello/README.md) - [Icomoon](packages/icomoon/README.md) ## Setup Refer to the guide for [Expo](./docs/SETUP-EXPO.md), [React Native](./docs/SETUP-REACT-NATIVE.md) or [Web](./docs/SETUP-WEB.md) for further instructions. ### Font location customisation For fonts like the FontAwesome Pro as well as Fontello and Icomoon where you provide the fonts, the default location for the font files is `rnvi-fonts` in the same directory as your package.json. This can be customized by setting the `fontDir` property in your `package.json` file. ```json { "reactNativeVectorIcons": { "fontDir": "src/rnvi-fonts" } } ``` ## `Icon` Component You can either use one of the bundled icons above or roll your own custom font. ```js import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid"; // or use the static version to embed the font at build time instead of loading it at runtime import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid/static"; <FontAwesomeFreeSolid name="rocket" size={30} color="#900" />; ``` ### Props Any [Text props](https://reactnative.dev/docs/text.html#props) and the following: | Prop | Description | Default | | ----------- | ----------------------------------------------------------------------- | ----------- | | **`size`** | Size of the icon, can also be passed as `fontSize` in the style object. | `12` | | **`name`** | What icon to show, see Icon Explorer app or one of the links above. | _None_ | | **`color`** | Color of the icon. | _Inherited_ | ### Styling Since `Icon` builds on top of the `Text` component, most [style properties](https://reactnative.dev/docs/style.html) will work as expected, you might find it useful to play around with these: - `backgroundColor` - `borderWidth` - `borderColor` - `borderRadius` - `padding` - `margin` - `color` - `fontSize` By combining some of these you can create for example :   ## Usage as PNG Image/Source Object Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. You need to use Expo (with `expo-font` installed) _or_ install `@react-native-vector-icons/get-image` to use this feature. Both methods return an `ImageResult` object (`{ uri, width, height, scale }`) that can be passed directly as an `Image` source. ```jsx const source = Icon.getImageSourceSync('user', 20, 'red'); // or with an options object: const source = Icon.getImageSourceSync('user', { size: 20, color: 'red', lineHeight: 28 }); return <Image source={source} />; ``` Alternatively you may use the async method `Icon.getImageSource`. ```jsx const source = await Icon.getImageSource('user', 20, 'red'); // or with an options object: const source = await Icon.getImageSource('user', { size: 20, color: 'red' }); ``` Keep in mind that `Icon.getImageSourceSync` is blocking and might incur performance penalties. Subsequent calls will use cache, however. ### Static methods All static methods from `Icon` are supported by multi-styled fonts. | Method | Description | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`getImageSource`** | Returns a promise resolving to an `ImageResult` of a bitmap version of the icon. Usage: `const source = await Icon.getImageSource(name, { size, color, lineHeight })` | | **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, { size, color, lineHeight })` | ## Custom Fonts The best approach is to use our icon generator to create your own icon package. See [CREATE_FONT_PACKAGE.md](./docs/CREATE_FONT_PACKAGE.md) to learn how to create your own font packages. You can also use `createIconSet()` directly in your project. This returns your own custom font based on the `glyphMap` where the key is the icon name and the value is either a UTF-8 character or its character code. `postScriptName` is the name of the postscript font. Open the font in <https://fontdrop.info/>, Font Book.app or similar to learn the name. Also pass the `fontFileName` argument for Android support. ```js import { createIconSet } from "@react-native-vector-icons/common"; const glyphMap = { "icon-name": 1234, test: "∆" }; // use createIconSet() with object parameter // or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])` const Icon = createIconSet(glyphMap, { postScriptName: "FontName", fontFileName: "font-name.ttf", fontSource: require("../fonts/font-name.ttf"), // optional, for dynamic loading. Can also be a local file uri. }); ``` If you aren't using dynamic font loading you need to make sure your font is copied into your bundle. ## Animation React Native comes with an amazing animation library called [`Animated`](https://reactnative.dev/docs/animated.html). To use it with an icon, simply create an animated component with this line: `const AnimatedIcon = Animated.createAnimatedComponent(Icon)`. You can also use the higher level animation library [react-native-animatable](https://github.com/oblador/react-native-animatable). ## Dynamic icon font loading TL;DR we recommend you use the `/static` import if you use [Development builds](https://docs.expo.dev/develop/development-builds/introduction/) and the root import when using [Expo Go](https://docs.expo.dev/develop/development-builds/introduction/#difference-between-expo-go-and-development-builds). Icon fonts can be made available statically at build time or loaded dynamically at runtime. The root (non-`/static`) import uses dynamic loading. If you don't need dynamic loading, use the `/static` imports (e.g. `"@react-native-vector-icons/ionicons/static"`). See the [Expo setup guide](./docs/SETUP-EXPO.md) for more details, config plugins, and the dynamic loading API. ## Usage Examples ### Icon Explorer Try the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon.  ### Basic Example ```js import { IonIcons } from "@react-native-vector-icons/ionicons/static"; const ExampleView = () => ( <IonIcons name="ios-person" size={30} color="#4F8EF7" /> ); ``` ### Inline Icons ```js import { Text } from "react-native"; import { IonIcons } from "@react-native-vector-icons/ionicons/static"; const ExampleView = (props) => ( <Text> Lorem <IonIcons name="ios-book" color="#4F8EF7" /> Ipsum </Text> ); ``` ## Testing When running tests with `jest` you will need to mock out the native code loading to prevent errors. In `jest.config.js` add ```js // Mock out font loading moduleNameMapper: { '\\.(ttf)$': '<rootDir>/__mocks__/file-mock.js', } ``` Create `__mocks__/file-mock.js`: ```js module.exports = {}; ``` Create `__mocks__/@react-native-vector-icons/common.js`: ```js // Mock the entire common library so there are no native module loading errors module.exports = { createIconSet: () => "icon", }; ``` ## [Changelog](https://github.com/oblador/react-native-vector-icons/releases) ## License This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html). Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).
react-native-animatable
# react-native-animatable Declarative transitions and animations for React Native [](https://github.com/oblador/react-native-animatable/actions/workflows/tests.yml) [](https://npmjs.com/package/react-native-animatable) [](https://npmjs.com/package/react-native-animatable) ## Installation `$ npm install react-native-animatable --save` ## Usage To animate things you must use the `createAnimatableComponent` composer similar to the `Animated.createAnimatedComponent`. The common components `View`, `Text` and `Image` are precomposed and exposed under the `Animatable` namespace. If you have your own component that you wish to animate, simply wrap it with a `Animatable.View` or compose it with: ```js import * as Animatable from 'react-native-animatable'; MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); ``` ### Declarative Usage #### Animations ```html <Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text> ``` #### Looping To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. ```html <Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate">Up and down you go</Animatable.Text> <Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}>❤️</Animatable.Text> ```  #### Generic transitions You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used. *Note: If you are using colors, please use `rgba()` syntax.* *Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.* ```html <TouchableOpacity onPress={() => this.setState({fontSize: (this.state.fontSize || 10) + 5 })}> <Animatable.Text transition="fontSize" style={{fontSize: this.state.fontSize || 10}}>Size me up, Scotty</Animatable.Text> </TouchableOpacity> ``` #### Properties *Note: Other properties will be passed down to underlying component.* | Prop | Description | Default | |---|---|---| |**`animation`**|Name of the animation, see below for available animations. |*None*| |**`duration`**|For how long the animation will run (milliseconds). |`1000`| |**`delay`**|Optionally delay animation (milliseconds). |`0`| |**`direction`**|Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. |`normal`| |**`easing`**|Timing function for the animation. Valid values: custom function or `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-circ`, `ease-out-circ`, `ease-in-out-circ`, `ease-in-expo`, `ease-out-expo`, `ease-in-out-expo`, `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`, `ease-in-quint`, `ease-out-quint`, `ease-in-out-quint`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-back`, `ease-out-back`, `ease-in-out-back`. |`ease`| |**`iterationCount`**|How many times to run the animation, use `infinite` for looped animations. |`1`| |**`iterationDelay`**|For how long to pause between animation iterations (milliseconds). |`0`| |**`transition`**|What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. |*None*| |**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*| |**`onAnimationEnd`**|A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. |*None*| |**`onTransitionBegin`**|A function that is called when the transition of a style has been started. The function is called with a `property` argument to differentiate between styles. |*None*| |**`onTransitionEnd`**|A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a `property` argument to differentiate between styles. |*None*| |**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. |`false`| |**`isInteraction`**|Whether or not this animation creates an "interaction handle" on the InteractionManager. |`false` if `iterationCount` is less than or equal to one| ### Imperative Usage #### Animations All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled. ```js import * as Animatable from 'react-native-animatable'; class ExampleView extends Component { handleViewRef = ref => this.view = ref; bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled')); render() { return ( <TouchableWithoutFeedback onPress={this.bounce}> <Animatable.View ref={this.handleViewRef}> <Text>Bounce me!</Text> </Animatable.View> </TouchableWithoutFeedback> ); } } ``` To stop any ongoing animations, just invoke `stopAnimation()` on that element. You can also animate imperatively by using the `animate()` function on the element for custom animations, for example: ``` this.view.animate({ 0: { opacity: 0 }, 1: { opacity: 1 } }); ``` #### Generic transitions ##### `transition(fromValues, toValues[[, duration], easing])` Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. ##### `transitionTo(toValues[[, duration], easing])` This function will try to determine the current styles and pass it along to `transition()` as `fromValues`. ```js import * as Animatable from 'react-native-animatable'; class ExampleView extends Component { handleTextRef = ref => this.text = ref; render() { return ( <TouchableWithoutFeedback onPress={() => this.text.transitionTo({ opacity: 0.2 })}> <Animatable.Text ref={this.handleTextRef}>Fade me!</Animatable.Text> </TouchableWithoutFeedback> ); } } ``` ## Custom Animations Animations can be referred to by a global name or a definition object. ### Animation Definition Schema An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples. A simple fade in animation: ```js const fadeIn = { from: { opacity: 0, }, to: { opacity: 1, }, }; ``` ```html <Animatable.Text animation={fadeIn} >Fade me in</Animatable.Text> ``` Combining multiple styles to create a zoom out animation: ```js const zoomOut = { 0: { opacity: 1, scale: 1, }, 0.5: { opacity: 1, scale: 0.3, }, 1: { opacity: 0, scale: 0, }, }; ``` ```html <Animatable.Text animation={zoomOut} >Zoom me out</Animatable.Text> ``` To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value. ```js Animatable.initializeRegistryWithDefinitions({ myFancyAnimation: { from: { ... }, to: { ... }, } }); ``` ## React Europe Talk [](https://www.youtube.com/watch?v=3SITFIGz4xo) The talk __*A Novel Approach to Declarative Animations in React Native*__ from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo). ## `MakeItRain` example See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. [](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) ## `AnimatableExplorer` example See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more.  ## Animations Animations are heavily inspired by [Animated.css](https://daneden.github.io/animate.css/). ### Attention Seekers  * `bounce` * `flash` * `jello` * `pulse` * `rotate` * `rubberBand` * `shake` * `swing` * `tada` * `wobble` ### Bouncing Entrances  * `bounceIn` * `bounceInDown` * `bounceInUp` * `bounceInLeft` * `bounceInRight` ### Bouncing Exits  * `bounceOut` * `bounceOutDown` * `bounceOutUp` * `bounceOutLeft` * `bounceOutRight` ### Fading Entrances  * `fadeIn` * `fadeInDown` * `fadeInDownBig` * `fadeInUp` * `fadeInUpBig` * `fadeInLeft` * `fadeInLeftBig` * `fadeInRight` * `fadeInRightBig` ### Fading Exits  * `fadeOut` * `fadeOutDown` * `fadeOutDownBig` * `fadeOutUp` * `fadeOutUpBig` * `fadeOutLeft` * `fadeOutLeftBig` * `fadeOutRight` * `fadeOutRightBig` ### Flippers  * `flipInX` * `flipInY` * `flipOutX` * `flipOutY` ### Lightspeed  * `lightSpeedIn` * `lightSpeedOut` ### Sliding Entrances  * `slideInDown` * `slideInUp` * `slideInLeft` * `slideInRight` ### Sliding Exits  * `slideOutDown` * `slideOutUp` * `slideOutLeft` * `slideOutRight` ### Zooming Entrances  * `zoomIn` * `zoomInDown` * `zoomInUp` * `zoomInLeft` * `zoomInRight` ### Zooming Exits  * `zoomOut` * `zoomOutDown` * `zoomOutUp` * `zoomOutLeft` * `zoomOutRight` ## [Changelog](https://github.com/oblador/react-native-animatable/releases) ## License [MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015
react-native-keychain
<h1 align="center"><img src="website/static/img/logo.png" align="center" width="50" height="50" alt="" /> react-native-keychain</h1> [](https://github.com/oblador/react-native-keychain/actions/workflows/e2e_tests.yaml) [](https://npmjs.com/package/react-native-keychain) [](https://npmjs.com/package/react-native-keychain) This library provides access to the Keychain (iOS) and Keystore (Android) for securely storing credentials like passwords, tokens, or other sensitive information in React Native apps. - [Installation](#installation) - [Documentation](#documentation) - [Changelog](#changelog) - [Maintainers](#maintainers) - [Used By](#used-by) - [License](#license) ## Installation 1. Run `yarn add react-native-keychain` 2. Run `pod install` in `ios/` directory to install iOS dependencies. 3. If you want to support FaceID, add a `NSFaceIDUsageDescription` entry in your `Info.plist`. 4. Re-build your Android and iOS projects. ## Documentation Please refer to the documentation website on https://oblador.github.io/react-native-keychain ## Changelog Check the [GitHub Releases page](https://github.com/oblador/react-native-keychain/releases). ## Maintainers <table> <tbody> <tr> <td align="center"> <a href="https://github.com/oblador"> <img width="100" height="100" src="https://github.com/oblador.png?v=3&s=150"> <br /> <strong>Joel Arvidsson</strong> </a> <br /> Author </td> <td align="center"> <a href="https://github.com/DorianMazur"> <img width="100" height="100" src="https://github.com/DorianMazur.png?v=3&s=150"> <br /> <strong>Dorian Mazur</strong> </a> <br /> Maintainer </td> <td align="center"> <a href="https://github.com/vonovak"> <img width="100" height="100" src="https://github.com/vonovak.png?v=3&s=150"> <br /> <strong>Vojtech Novak</strong> </a> <br /> Maintainer </td> <td align="center"> <a href="https://github.com/pcoltau"> <img width="100" height="100" src="https://github.com/pcoltau.png?v=3&s=150"> <br /> <strong>Pelle Stenild Coltau</strong> </a> <br /> Maintainer </td> <td align="center"> <a href="https://github.com/OleksandrKucherenko"> <img width="100" height="100" src="https://github.com/OleksandrKucherenko.png?v=3&s=150"> <br /> <strong>Oleksandr Kucherenko</strong> </a> <br /> Contributor </td> </tr> <tbody> </table> ## Used By This library is used by several projects, including: - [Rainbow Wallet](https://github.com/rainbow-me/rainbow) - [MetaMask Mobile](https://github.com/MetaMask/metamask-mobile) - [BlueWallet](https://github.com/bluewallet/bluewallet) ## License MIT © Joel Arvidsson 2016-2020
react-native-collapsible
# react-native-collapsible _Animated collapsible component for React Native using the Animated API_ Pure JavaScript, supports dynamic content heights and components that is aware of its `collapsed` state (good for toggling arrows etc). ## Installation ```bash npm install --save react-native-collapsible ``` ## Collapsible Usage ```js import Collapsible from 'react-native-collapsible'; () => ( <Collapsible collapsed={isCollapsed}> <SomeCollapsedView /> </Collapsible> ); ``` ## Properties | Prop | Description | Default | | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` | | **`collapsed`** | Whether to show the child components or not | `true` | | **`collapsedHeight`** | Which height should the component collapse to | `0` | | **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` | | **`duration`** | Duration of transition in milliseconds | `300` | | **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` | | **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | `true` | | **`style`** | Optional styling for the container | | | **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` | ## Accordion Usage This is a convenience component for a common use case, see demo below. ```js import Accordion from 'react-native-collapsible/Accordion'; () => ( <Accordion activeSections={[0]} sections={['Section 1', 'Section 2', 'Section 3']} renderSectionTitle={this._renderSectionTitle} renderHeader={this._renderHeader} renderContent={this._renderContent} onChange={this._updateSections} /> ); ``` ## Properties | Prop | Description | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | **`sections`** | An array of sections passed to the render methods | | **`renderHeader(content, index, isActive, sections)`** | A function that should return a renderable representing the header | | **`renderContent(content, index, isActive, sections)`** | A function that should return a renderable representing the content | | **`renderFooter(content, index, isActive, sections)`** | A function that should return a renderable representing the footer | | **`renderSectionTitle(content, index, isActive)`** | A function that should return a renderable representing the title of the section outside the touchable element | | **`onChange(indexes)`** | A function that is called when the currently active section(s) are updated. | | **`keyExtractor(item, index)`** | Used to extract a unique key for a given item at the specified index. | | **`activeSections`** | Control which indices in the `sections` array are currently open. If empty, closes all sections. | | **`underlayColor`** | The color of the underlay that will show through when tapping on headers. Defaults to black. | | **`touchableComponent`** | The touchable component used in the Accordion. Defaults to `TouchableHighlight` | | **`touchableProps`** | Properties for the `touchableComponent` | | **`disabled`** | Set whether the user can interact with the Accordion | | **`align`** | See `Collapsible` | | **`duration`** | See `Collapsible` | | **`easing`** | See `Collapsible` | | **`onAnimationEnd(key, index)`** | See `Collapsible`. | | **`expandFromBottom`** | Expand content from the bottom instead of the top | | **`expandMultiple`** | Allow more than one section to be expanded. Defaults to false. | | **`sectionContainerStyle`** | Optional styling for the section container. | | **`containerStyle`** | Optional styling for the Accordion container. | | **`renderAsFlatList`** | Optional rendering as FlatList (defaults to false). | ## Demo  ## Example Check full example in the `Example` folder. ```js import React, { Component } from 'react'; import Accordion from 'react-native-collapsible/Accordion'; const SECTIONS = [ { title: 'First', content: 'Lorem ipsum...', }, { title: 'Second', content: 'Lorem ipsum...', }, ]; class AccordionView extends Component { state = { activeSections: [], }; _renderSectionTitle = (section) => { return ( <View style={styles.content}> <Text>{section.content}</Text> </View> ); }; _renderHeader = (section) => { return ( <View style={styles.header}> <Text style={styles.headerText}>{section.title}</Text> </View> ); }; _renderContent = (section) => { return ( <View style={styles.content}> <Text>{section.content}</Text> </View> ); }; _updateSections = (activeSections) => { this.setState({ activeSections }); }; render() { return ( <Accordion sections={SECTIONS} activeSections={this.state.activeSections} renderSectionTitle={this._renderSectionTitle} renderHeader={this._renderHeader} renderContent={this._renderContent} onChange={this._updateSections} /> ); } } ``` ### Transition backgrounds If you combine with the [`react-native-animatable`](https://github.com/oblador/react-native-animatable) library you can easily transition the background color between the active and inactive state or add animations. Lets augment the example above with: ```js import * as Animatable from 'react-native-animatable'; (...) _renderHeader(section, index, isActive, sections) { return ( <Animatable.View duration={300} transition="backgroundColor" style={{ backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)') }}> <Text style={styles.headerText}>{section.title}</Text> </Animatable.View> ); } _renderContent(section, i, isActive, sections) { return ( <Animatable.View duration={300} transition="backgroundColor" style={{ backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)') }}> <Animatable.Text duration={300} easing="ease-out" animation={isActive ? 'zoomIn' : false}> {section.content} </Animatable.Text> </Animatable.View> ); } (...) ``` To produce this (slowed down for visibility):  ## Contributing Interested in contributing to this repo? Have a look at our [Contributing Guide](https://github.com/oblador/react-native-collapsible/blob/master/.github/CONTRIBUTING.MD) ## Maintainers <table> <tbody> <tr> <td align="center"> <a href="https://github.com/oblador"> <img width="150" height="150" src="https://github.com/oblador.png?v=3&s=150"> <br> <strong>Joel Arvidsson</strong> </a> <br> Author </td> </tr> <tbody> </table> ## License [MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson and contributors 2015-2021
react-native-performance
# React Native Performance tooling Toolchain to measure and monitor the performance of your React Native app in development, pipeline and in production. ## Packages ### [`react-native-performance`](https://github.com/oblador/react-native-performance/blob/master/packages/react-native-performance/README.md) An implementation of the [`Performance` API](https://developer.mozilla.org/en-US/docs/Web/API/Performance) for React Native. - Integrates well with `React.Profiler` API - Trace arbitrary events in your app such as component render time - Capture network traffic - Collect native traces such as script execution and time to interactive of root view - Collect native metrics in development such as JS bundle size ### [`isomorphic-performance`](https://github.com/oblador/react-native-performance/blob/master/packages/isomorphic-performance/README.md) Isomorphic Performance API for Node, Browser & React Native. Useful if your app targets both web and native. ## Demo See the projects in the [`examples`](https://github.com/oblador/react-native-performance/tree/master/examples) folder. ## Devtools integration With Flipper deprecated, the best replacement is currently [Rozenite](https://www.rozenite.dev) that supports `react-native-performance` out of the box with an [official plugin](https://www.rozenite.dev/docs/official-plugins/performance-monitor). ## Development Make sure to have [`yarn`](https://classic.yarnpkg.com/lang/en/) v1 installed and run `yarn` in the root folder to install dependencies for all packages. Run the example app with: ```bash cd examples/vanilla yarn start # important to run this before the next step! yarn ios # or yarn android ``` Run the unit tests with: ```bash yarn test ``` ## License MIT © Joel Arvidsson 2019 – present