mimic-react-native v1.2.2

mimic-react-native

Used to mimic react-native components in react-dom

Click here to see in npmjs.com

Under Development

Install

npm install mimic-react-native

Usage

Changing from react-native to react-dom

Change react-native imports to mimic-react-native

E.g:

import {View, Text} from 'react-native' //DELETE
import {View, Text} from 'mimic-react-native' //ADD

Using Directly in react-dom

import React, { useState } from 'react'

//Only these components are currently functioning. This library is still under development.
import {
  View,
  Text,
  TextInput,
  ScrollView,
  Button,
  Switch,
  Flatlist
} from 'mimic-react-native'

const ExampleApp = () => {
  const [checked, setChecked] = useState(false)
  return (
    <View>
      <Text style={{ color: 'red' }}>five</Text>
      <TextInput onChangeText={() => console.log(5)} />
      <ScrollView>5</ScrollView>
      <Button>button</Button>
      <Switch onValueChange={() => setChecked(!checked)} value={checked} />
      <FlatList
        keyExtractor={(item) => item.key}
        data={data}
        renderItem={({ item }: any) => <p>{item.name}</p>}
      />
    </View>
  )
}

export default App

API:

<View>, <ScrollView>, <SafeAreaView>

These three are the same component exported in different names.

import { View } from 'mimic-react-native'

export default function () {
  return <View {...props}>{children}</View>
}

<Text>

import { View, Text } from 'mimic-react-native'

export default function () {
  return (
    <View>
      <Text elementType='h1'>children</Text>
    </View>
  )
}

<Image>

import { View, Image } from 'mimic-react-native'

export default function () {
  return (
    <View>
      <Image source={{ uri: 'image://url' }} />
    </View>
  )
}

<TextInput>

import { View, TextInput } from 'mimic-react-native'

export default function () {
  return (
    <View>
      <TextInput />
    </View>
  )
}

<Button>

import { Button } from 'mimic-react-native'

export default function () {
  return (
    <Button color='red' textColor='black'>
      TEXT
    </Button>
  )
}

<Switch>

import { Switch } from 'mimic-react-native'

export default function () {
  return <Switch />
}

<FlatList>

import { FlatList } from 'mimic-react-native'

export default function () {
  const data = [
    {
      key: 1,
      name: 'a'
    },
    {
      key: 2,
      name: 'b'
    },
    {
      key: 3,
      name: 'c'
    }
  ]
  return (
    <FlatList
      keyExtractor={(item) => item.key}
      data={data}
      renderItem={({ item }: any) => <p>{item.name}</p>}
    />
  )
}

License

MIT © david-sling