Rn-spawn-component NPM

Clone and remove react-native components.

✨ Demo

A complete demo with code examples can be found in this repo: https://github.com/non-threatening/rnSpawnComponentDemo

Install

yarn add rn-spawn-component

or

npm i rn-spawn-component

Usage

The SpawnProvider must wrap your App

import {SpawnProvider, SpawnController, AddSpawn} from 'rn-spawn-component';

const App: () => React$Node = () => {
  function MyComponent() {
    return <Text>Hello World</Text>;
  }
  return (
    <SpawnProvider>
      <SpawnController spawn={<MyComponent />} name="myComponent" />
      <AddSpawn name="myComponent" label="Spawn Component" />
    </SpawnProvider>
  );
};

API

SpawnController

Place SpawnController where you would like your spawned Components to appear.

import {SpawnController} from 'rn-spawn-component';

<SpawnController spawn={<MyComponent />} name="myComponent" startCount={2} />

Props	Type	Required	Description
spawn	Component	true	A single React Component
name	string	true	A unique name for each reproducible component
startCount	number	optional	Number to spawn on load

Drop in button components

AddSpawn

import {AddSpawn} from 'rn-spawn-component';

<AddSpawn name="myComponent" label="Spawn Component" prepend={<myIcon />} />

Props	Type	Required	Description
name	string	true	Name of the SpawnController you wish to add

ClearSpawns

Clears all spawned components sharing a name.

import {ClearSpawns} from 'rn-spawn-component';

<ClearSpawns name="myComponent" label="Clear Spawns" append={<myIcon />} />

Props	Type	Required	Description
name	string	true	Name of the SpawnController components you wish to clear

RemoveAll

Removes all spawned components of any name.

import {RemoveAll} from 'rn-spawn-component';

<RemoveAll label="Remove All" />

RemoveSpawn

Removes the spawned component it is inside of.

import {RemoveSpawn} from 'rn-spawn-component';

<RemoveSpawn spawn={spawnNumber} label={'Kill Me'} />

Props	Type	Required	Description
spawn	number	true	spawnNumber* of the Component you would like to remove

*The spawnNumber is generated on creation. See myComponent.js below to see how to access the SpawnNumber.

// myComponent.js
import React from 'react';
import {Text, View} from 'react-native';
import {RemoveSpawn} from 'rn-spawn-component';

export const MyComponent = (props) => {
  const spawnNum = props.spawnNumber;
  return (
    <View
      style={{
        backgroundColor: 'rgba(255, 255, 255, 0.2)',
        margin: 10,
        height: 80,
      }}>
      <View style={{alignItems: 'center'}}>
        <Text>spawnNumber: {spawnNum}</Text>
        <RemoveSpawn spawn={spawnNum} label={'Kill Me'} />
      </View>
    </View>
  );
};

Functions can be called independently of the included buttons.

This must be within the scope of the SpawnProvider in a functional component.

// import useSpawnArray
import {useSpawnArray} from './spawnContext';

// declare the dispatch function in your component
const [{}, dispatch] = useSpawnArray();

// name: The corresponding name of the SpawnController to add.
const add = (name) => {
  dispatch({type: 'NEW_SPAWN', name: name});
};

// spawnNumber: See myComponent.js example above
const remove = (spawnNumber) => {
  dispatch({type: 'REMOVE_SINGLE_SPAWN', payload: spawnNumber});
};

// name: The corresponding name of the SpawnControllers to remove.
const removeKind = (name) => {
  dispatch({type: 'REMOVE_NAME', name: name});
};

// Kill all Spawned components
const removeAll = () => {
  dispatch({type: 'KILL_ALL_SPAWN'});
};