Page d'acceuil + Redux pour favorite city

master
Thomas Chazot 2 years ago
parent 441ff3d59d
commit c93539a268

@ -0,0 +1,169 @@
import React from "react"
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { View, Text, StyleSheet, TouchableHighlight, Image } from "react-native";
import { City, Weather } from "../data/stub";
type CityProps = {
weather: Weather,
}
export function Details(props: CityProps){
const weather: Weather = props.weather
const city = weather.city
return (
<View style={{alignItems: "center", backgroundColor: "darksalmon", height: "100%", width: "100%"}}>
<Text style={styles.name}>{city.name}</Text>
<View style={styles.place}>
<Text style={styles.petitText}>{city.longitude} - {city.latitude}</Text>
</View>
<TouchableHighlight>
<Image style={styles.image} source={ weather?.weatherType=="Nuageux" ? require('../assets/Nuageux.png') : require('../assets/Nuageux.png')}/>
</TouchableHighlight>
<Text style={styles.weatherType}>{weather?.weatherType}</Text>
<View style={styles.supertruc}>
<Image style={styles.petitImage} source={require('../assets/temperature.png')}/>
<View style={styles.supertrucencore}>
<Text style={styles.temperature}>{weather?.temperature}°C</Text>
<Text style={styles.petitTemp}>Ressenti {weather?.temperatureFeelsLike}°C</Text>
</View>
</View>
<View style={styles.boxes}>
<View style={styles.leftBox}>
<View style={styles.imageEtTexte}>
<Image style={styles.imageHumidity} source={require('../assets/humidity.png')}/>
<Text style={styles.text}>HUMIDITY</Text>
</View>
<Text style={styles.humidityText}>{weather?.humidity}%</Text>
</View>
<View style={styles.rightBox}>
<View style={styles.imageEtTexte}>
<Image style={styles.imageHumidity} source={require('../assets/wind.png')}/>
<Text style={styles.text}>WIND SPEED</Text>
</View>
<Text style={styles.humidityText}>{weather?.windSpeed} km/h</Text>
</View>
</View>
<View style={styles.boxes}>
<View style={styles.leftBox}>
<View style={styles.imageEtTexte}>
<Image style={styles.imageHumidity} source={require('../assets/pressure.png')}/>
<Text style={styles.text}>PRESSURE</Text>
</View>
<Text style={styles.humidityText}>{weather?.pressure} hPa</Text>
</View>
<View style={styles.rightBox}>
<View style={styles.imageEtTexte}>
<Image style={styles.imageHumidity} source={require('../assets/visibility.png')}/>
<Text style={styles.text}>VISIBILITY</Text>
</View>
<Text style={styles.humidityText}>{weather?.visibility} km</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
name: {
marginTop: 30,
fontSize: 35,
fontWeight: "bold"
},
place: {
marginBottom: 20,
},
petitText: {
fontSize: 15
},
image: {
height: 100,
width: 100
},
title: {
fontWeight: "bold",
fontSize: 18
},
temperature: {
marginTop: 10,
fontSize: 25,
fontWeight: "600"
},
petitTemp: {
fontSize: 16,
marginBottom: 35
},
weatherType: {
fontSize: 17,
marginBottom: 20
},
button: {
height: 30,
width: 30,
marginTop: 13,
alignSelf: "flex-end",
margin: 5
},
supertruc: {
flexDirection: "row"
},
supertrucencore: {
flexDirection: "column"
},
petitImage: {
height: 40,
width: 40,
marginRight: 7,
marginTop: 15
},
imageHumidity: {
height: 20,
width: 20,
marginLeft: 10
},
leftBox: {
alignSelf: "flex-start",
margin: 25,
marginTop: 10,
marginBottom: 5,
height: 90,
width: 150,
flexDirection: "column",
backgroundColor: "powderblue",
borderRadius: 20
},
rightBox: {
alignSelf: "flex-start",
marginRight: 25,
marginTop: 10,
marginBottom: 5,
height: 90,
width: 150,
flexDirection: "column",
backgroundColor: "powderblue",
borderRadius: 20
},
humidityText: {
marginTop: 13,
fontWeight: "bold",
fontSize: 20,
alignSelf: "center"
},
text: {
fontWeight: "normal",
fontStyle: 'italic',
fontSize: 10,
alignSelf: "center",
marginLeft: 7
},
imageEtTexte: {
flexDirection: "row",
marginTop: 13
},
boxes: {
flexDirection: "row"
}
});

@ -26,15 +26,17 @@ export function VilleCompopo(props: VilleProps){
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={{flex: 1, flexDirection: "row"}}> <View style={{flex: 1, flexDirection: "row", justifyContent: "space-between"}}>
<View style={styles.bothtext}> <View style={styles.bothtext}>
<Text style={styles.title}>{props.weather.city.name}</Text> <Text style={styles.title}>{props.weather.city.name}</Text>
<Text>{props.weather.city.latitude} - {props.weather.city.longitude}</Text> <Text>{props.weather.city.latitude} - {props.weather.city.longitude}</Text>
</View> </View>
<Text style={styles.temperature}>{props.weather.temperature}</Text> <View style={{flexDirection: "row", alignItems: "center"}}>
<TouchableHighlight onPress={() => changeFavoriteCity(props.weather.city, isFavorite)}> <Text style={styles.title}>{props.weather.temperature}</Text>
<TouchableHighlight onPress={() => changeFavoriteCity(props.weather.city, isFavorite)}>
<Image source={ isFavorite ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/> <Image source={ isFavorite ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
</TouchableHighlight> </TouchableHighlight>
</View>
</View> </View>
</View> </View>
); );
@ -64,8 +66,9 @@ const styles = StyleSheet.create({
button: { button: {
height: 30, height: 30,
width: 30, width: 30,
marginTop: 13,
alignSelf: "flex-end", alignSelf: "flex-end",
margin: 5 marginRight: "5%",
} marginLeft: "10%"
},
}); });

@ -0,0 +1 @@
../react-native-vector-icons/bin/fa5-upgrade.sh

@ -0,0 +1 @@
../react-native-vector-icons/bin/generate-icon.js

@ -12,6 +12,7 @@
"@react-navigation/native@^6.1.3", "@react-navigation/native@^6.1.3",
"@react-navigation/stack@^6.3.12", "@react-navigation/stack@^6.3.12",
"@reduxjs/toolkit@^1.9.3", "@reduxjs/toolkit@^1.9.3",
"@rneui/themed@^4.0.0-rc.7",
"@types/react-native@~0.70.6", "@types/react-native@~0.70.6",
"@types/react@~18.0.14", "@types/react@~18.0.14",
"expo-cli@^6.1.0", "expo-cli@^6.1.0",
@ -354,6 +355,7 @@
"@react-navigation/routers@^6.1.6": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.6.tgz", "@react-navigation/routers@^6.1.6": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.6.tgz",
"@react-navigation/stack@^6.3.12": "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.12.tgz#8e3779efd0b2ad015f62b89193b9eacecb41fab2", "@react-navigation/stack@^6.3.12": "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.12.tgz#8e3779efd0b2ad015f62b89193b9eacecb41fab2",
"@reduxjs/toolkit@^1.9.3": "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.3.tgz#27e1a33072b5a312e4f7fa19247fec160bbb2df9", "@reduxjs/toolkit@^1.9.3": "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.3.tgz#27e1a33072b5a312e4f7fa19247fec160bbb2df9",
"@rneui/themed@^4.0.0-rc.7": "https://registry.yarnpkg.com/@rneui/themed/-/themed-4.0.0-rc.7.tgz#5a016b853ee2e62bfd3183d39fc03b35864012f6",
"@segment/loosely-validate-event@^2.0.0": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz", "@segment/loosely-validate-event@^2.0.0": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
"@sideway/address@^4.1.3": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", "@sideway/address@^4.1.3": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
"@sideway/formula@^3.0.0": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz", "@sideway/formula@^3.0.0": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",

@ -1,6 +1,4 @@
MIT License Copyright (c) 2011-2016 Heather Arthur <fayearthur@gmail.com>
Copyright (c) 2014-present Sebastian McKenzie and other contributors
Permission is hereby granted, free of charge, to any person obtaining Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the a copy of this software and associated documentation files (the
@ -20,3 +18,4 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

@ -39,18 +39,14 @@ buildscript {
? rootProject.ext['kotlinVersion'] ? rootProject.ext['kotlinVersion']
: rootProject.hasProperty('AsyncStorage_kotlinVersion') : rootProject.hasProperty('AsyncStorage_kotlinVersion')
? rootProject.properties['AsyncStorage_kotlinVersion'] ? rootProject.properties['AsyncStorage_kotlinVersion']
: '1.6.10' : '1.8.10'
repositories { repositories {
mavenCentral() mavenCentral()
google() google()
} }
dependencies { dependencies {
def projectExampleDir = Paths.get(project.projectDir.getParent(), "example", "android").toString() classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$asyncStorageKtVersion"
def rootProjectDir = rootProject.projectDir.getPath()
if (projectExampleDir == rootProjectDir) {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$asyncStorageKtVersion"
}
} }
} }
@ -78,10 +74,10 @@ if (useNextStorage) {
} }
android { android {
compileSdkVersion safeExtGet('compileSdkVersion', 31) compileSdkVersion safeExtGet('compileSdkVersion', 32)
defaultConfig { defaultConfig {
minSdkVersion safeExtGet('minSdkVersion', 21) minSdkVersion safeExtGet('minSdkVersion', 23)
targetSdkVersion safeExtGet('targetSdkVersion', 31) targetSdkVersion safeExtGet('targetSdkVersion', 32)
buildConfigField "Long", "AsyncStorage_db_size", "${dbSizeInMB}L" buildConfigField "Long", "AsyncStorage_db_size", "${dbSizeInMB}L"
buildConfigField "boolean", "AsyncStorage_useDedicatedExecutor", "${useDedicatedExecutor}" buildConfigField "boolean", "AsyncStorage_useDedicatedExecutor", "${useDedicatedExecutor}"
buildConfigField "boolean", "AsyncStorage_useNextStorage", "${useNextStorage}" buildConfigField "boolean", "AsyncStorage_useNextStorage", "${useNextStorage}"
@ -112,9 +108,9 @@ repositories {
dependencies { dependencies {
if (useNextStorage) { if (useNextStorage) {
def room_version = getVersionOrDefault('AsyncStorage_next_roomVersion', '2.4.2') def room_version = getVersionOrDefault('AsyncStorage_next_roomVersion', '2.4.3')
def coroutines_version = "1.6.0" def coroutines_version = "1.6.4"
def coroutinesTest_version = "1.6.0" def coroutinesTest_version = "1.6.4"
// if we don't provide explicit dependency on reflection, kotlin plugin // if we don't provide explicit dependency on reflection, kotlin plugin
// would add one automatically, probably a version that is not compatible with // would add one automatically, probably a version that is not compatible with
// used kotlin // used kotlin

@ -105,7 +105,7 @@ private object MIGRATION_TO_NEXT : Migration(1, 2) {
} }
} }
@Database(entities = [Entry::class], version = DATABASE_VERSION, exportSchema = true) @Database(entities = [Entry::class], version = DATABASE_VERSION, exportSchema = false)
internal abstract class StorageDb : RoomDatabase() { internal abstract class StorageDb : RoomDatabase() {
abstract fun storage(): StorageDao abstract fun storage(): StorageDao

@ -1,6 +1,6 @@
{ {
"name": "@react-native-async-storage/async-storage", "name": "@react-native-async-storage/async-storage",
"version": "1.17.12", "version": "1.18.1",
"description": "Asynchronous, persistent, key-value storage system for React Native.", "description": "Asynchronous, persistent, key-value storage system for React Native.",
"main": "lib/commonjs/index.js", "main": "lib/commonjs/index.js",
"module": "lib/module/index.js", "module": "lib/module/index.js",
@ -64,7 +64,7 @@
"merge-options": "^3.0.4" "merge-options": "^3.0.4"
}, },
"peerDependencies": { "peerDependencies": {
"react-native": "^0.0.0-0 || 0.60 - 0.71 || 1000.0.0" "react-native": "^0.0.0-0 || 0.60 - 0.72 || 1000.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.0", "@babel/core": "^7.12.0",

@ -0,0 +1,130 @@
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# 4.0.0-rc.7 (2022-10-28)
### Bug Fixes
* add children as prop ([#3583](https://github.com/react-native-elements/react-native-elements/issues/3583)) ([d7fd4e2](https://github.com/react-native-elements/react-native-elements/commit/d7fd4e23c05990e645b4c2c923e690e65dd179d4))
* rename `white` theme color to `background` ([#3664](https://github.com/react-native-elements/react-native-elements/issues/3664)) ([48795ec](https://github.com/react-native-elements/react-native-elements/commit/48795eca211a55d447dcfdf4d17a3e1456d03ebc))
* **Switch:** Android throws an error when setting it to false ([#3601](https://github.com/react-native-elements/react-native-elements/issues/3601)) ([1246628](https://github.com/react-native-elements/react-native-elements/commit/1246628825d925f147dcde260047e8e2c614ec6e))
* **TabView:** iOS TabView issue ([#3635](https://github.com/react-native-elements/react-native-elements/issues/3635)) ([b3fc37e](https://github.com/react-native-elements/react-native-elements/commit/b3fc37ed169e25ebcde99c5d21814d28e36b474d))
### Features
* **SeachBar:** add `onKeyboardHide` for android ([#3657](https://github.com/react-native-elements/react-native-elements/issues/3657)) ([7960f47](https://github.com/react-native-elements/react-native-elements/commit/7960f4739e094b76ae342f3bb23aab6443b709a9))
* update Tab component ([#3658](https://github.com/react-native-elements/react-native-elements/issues/3658)) ([67eb98b](https://github.com/react-native-elements/react-native-elements/commit/67eb98b82b035eb554d87b40988077b169c0d571))
# 4.0.0-rc.5 (2022-06-25)
### Bug Fixes
* **Button:** theme spacing xs error ([#3563](https://github.com/react-native-elements/react-native-elements/issues/3563)) ([172499f](https://github.com/react-native-elements/react-native-elements/commit/172499fb44d0e99210a670eaa97990bbc8b3e53f))
* fix peerDependency compatibility ([#3545](https://github.com/react-native-elements/react-native-elements/issues/3545)) ([7a811f9](https://github.com/react-native-elements/react-native-elements/commit/7a811f9b3b8e674a74b173d75c657dd7fabb817a))
* **Tab:** indicator with initial index ([#3564](https://github.com/react-native-elements/react-native-elements/issues/3564)) ([8a44601](https://github.com/react-native-elements/react-native-elements/commit/8a44601650c2a141ba249cd6874d75b1c2e60452))
* **Tooltip:** add default value in measure component ([#3550](https://github.com/react-native-elements/react-native-elements/issues/3550)) ([dd72676](https://github.com/react-native-elements/react-native-elements/commit/dd72676964d4ffdc71c11d14709d19e839d94c40))
# 4.0.0-rc.4 (2022-05-21)
### Bug Fixes
* **ButtonGroup:** add and improve types and add tests ([#3220](https://github.com/react-native-elements/react-native-elements/issues/3220)) ([9f08153](https://github.com/react-native-elements/react-native-elements/commit/9f08153cf25a067880c74913a1355d1cf530d414))
* **Dialog:** Action button on web ([#3514](https://github.com/react-native-elements/react-native-elements/issues/3514)) ([d835acc](https://github.com/react-native-elements/react-native-elements/commit/d835acc4457e7108cfc6008f6b49fb66c3f1af42))
* **ListItem:** Accordion children areas were not hidden ([#3517](https://github.com/react-native-elements/react-native-elements/issues/3517)) ([dc1d369](https://github.com/react-native-elements/react-native-elements/commit/dc1d369e125cfbac936d4ffe034210915a0e79aa))
* **ListItem:** left & right content width onRelease in Swipeable ([#3534](https://github.com/react-native-elements/react-native-elements/issues/3534)) ([7816555](https://github.com/react-native-elements/react-native-elements/commit/7816555f2483bc2103b85094cfbb3c87f7f98dca))
* **Tab:** inputRange using Array.from ([#3538](https://github.com/react-native-elements/react-native-elements/issues/3538)) ([65a1fa9](https://github.com/react-native-elements/react-native-elements/commit/65a1fa9f72a07ff371552cb65b92df864fb0cfe7))
# 4.0.0-rc.3 (2022-05-09)
### Bug Fixes
* **Icon:** raised ios shadow issue ([#3491](https://github.com/react-native-elements/react-native-elements/issues/3491)) ([6224af4](https://github.com/react-native-elements/react-native-elements/commit/6224af4aa83979f531c160d18f81786c41c19bfa))
* **ListItem:** custom Icon for Accordion ([#3504](https://github.com/react-native-elements/react-native-elements/issues/3504)) ([fd0bbb6](https://github.com/react-native-elements/react-native-elements/commit/fd0bbb63b924c48964ba91f52d056a8aaf87af29))
* **Tab:** indicator on first render ([#3505](https://github.com/react-native-elements/react-native-elements/issues/3505)) ([974d344](https://github.com/react-native-elements/react-native-elements/commit/974d344f38ca12895711f87e2103b94479193612))
### Features
* **base:** add makeStyles ([#3510](https://github.com/react-native-elements/react-native-elements/issues/3510)) ([2ba0764](https://github.com/react-native-elements/react-native-elements/commit/2ba07640635fe5f4456fc6d45844ced986a511c5))
* **Button:** add title as children,`size`, `color`, `radius` prop ([#3494](https://github.com/react-native-elements/react-native-elements/issues/3494)) ([4774fae](https://github.com/react-native-elements/react-native-elements/commit/4774fae98968d532f2f1e1ab43793ccb71c24b37))
* **theming:** add `spacing` to theme ([#3495](https://github.com/react-native-elements/react-native-elements/issues/3495)) ([f71f16e](https://github.com/react-native-elements/react-native-elements/commit/f71f16eae0279baa183009799f5ecfa0a96b714d))
* **Tooltip:** add `animationType` prop ([#3487](https://github.com/react-native-elements/react-native-elements/issues/3487)) ([52d2f27](https://github.com/react-native-elements/react-native-elements/commit/52d2f2705f973d2a3a15d3acb6260a3fc3a58351))
# 4.0.0-rc.2 (2022-04-27)
### Bug Fixes
* **Chip:** border radius on tap ([#3442](https://github.com/react-native-elements/react-native-elements/issues/3442)) ([2720463](https://github.com/react-native-elements/react-native-elements/commit/2720463439f08c5af9553476ecea00f14424b29e))
* **ListItem:** isExpanded set default false for Accordion ([#3475](https://github.com/react-native-elements/react-native-elements/issues/3475)) ([3a66591](https://github.com/react-native-elements/react-native-elements/commit/3a66591fd3d770c0e77731da8748c84534f7d20d))
* **ListItem:** Swipeable panresponders ([#3449](https://github.com/react-native-elements/react-native-elements/issues/3449)) ([eca3f2e](https://github.com/react-native-elements/react-native-elements/commit/eca3f2efcc50e7dcf158323bce7da7e938aaa9f0))
* **Overlay:** custom backgroundColor override ([#3471](https://github.com/react-native-elements/react-native-elements/issues/3471)) ([2ad403a](https://github.com/react-native-elements/react-native-elements/commit/2ad403ac8b241420892b2b680ae9f5d7ead4ed6a))
* **SearchBar:** typescript errors ([#3437](https://github.com/react-native-elements/react-native-elements/issues/3437)) ([ec01b65](https://github.com/react-native-elements/react-native-elements/commit/ec01b65cbbb3a3795e0450a4c744acffa2b31d56))
* **Skeleton:** remove `type` from import ([#3476](https://github.com/react-native-elements/react-native-elements/issues/3476)) ([455276a](https://github.com/react-native-elements/react-native-elements/commit/455276a21eacd864883a4e7b90bec0aafba1ff35))
* **SpeedDial.Action:** wrap with pressable ([#3480](https://github.com/react-native-elements/react-native-elements/issues/3480)) ([6de7aa0](https://github.com/react-native-elements/react-native-elements/commit/6de7aa0985edc90a0325244227eda9e4aab71b60))
* **SpeedDial:** add themed FAB ([#3436](https://github.com/react-native-elements/react-native-elements/issues/3436)) ([e70d40b](https://github.com/react-native-elements/react-native-elements/commit/e70d40b262f199b31e533e42c57c2c18c6ccdfde))
* **SpeedDial:** Left placement for Actions ([#3479](https://github.com/react-native-elements/react-native-elements/issues/3479)) ([d006fe9](https://github.com/react-native-elements/react-native-elements/commit/d006fe9f532430a00931877be8a5cda4b4027942))
* **ThemeProvider:** add `children` prop explicitly ([#3477](https://github.com/react-native-elements/react-native-elements/issues/3477)) ([45f9523](https://github.com/react-native-elements/react-native-elements/commit/45f9523300d9bcc74837ddc01dc6b787cb4be54b))
* **Tooltip:** removeEventListener deprecated warning ([#3440](https://github.com/react-native-elements/react-native-elements/issues/3440)) ([f4db70d](https://github.com/react-native-elements/react-native-elements/commit/f4db70d862f906ce714ba3226dd9936e11cddc85))
### Features
* **CheckBox:** add disabled, disabledTitleStyle, disabledStyle props ([#3430](https://github.com/react-native-elements/react-native-elements/issues/3430)) ([d35df60](https://github.com/react-native-elements/react-native-elements/commit/d35df60071b4d8ab6d6eb7724147a5eac9eeebec))
# 4.0.0-rc.1 (2022-03-28)
### Bug Fixes
* pkg entry point for react-native cli ([#3403](https://github.com/react-native-elements/react-native-elements/issues/3403)) ([2c4bf8a](https://github.com/react-native-elements/react-native-elements/commit/2c4bf8a4a31498ce4dd2aefe22cff5cfc13363f1))
* remove Partial Color Type ([#3418](https://github.com/react-native-elements/react-native-elements/issues/3418)) ([c9c2bdc](https://github.com/react-native-elements/react-native-elements/commit/c9c2bdc58198392727c1b6affccf6201724a2391))
* **Tab, TabView:** conditional rendering ([#3397](https://github.com/react-native-elements/react-native-elements/issues/3397)) ([781e47a](https://github.com/react-native-elements/react-native-elements/commit/781e47adbedb4b93daa37ee659d3e9ef7b9ed5aa))
* **TabView:** swipe issue ([#3380](https://github.com/react-native-elements/react-native-elements/issues/3380)) ([fc3bb93](https://github.com/react-native-elements/react-native-elements/commit/fc3bb9365ef9cc1d8ba512ad38c5cc4ce83dc311))
# 4.0.0-rc.0 (2022-03-16)
### Bug Fixes
* **AirbnbRating:** add props to parent component ([#3335](https://github.com/react-native-elements/react-native-elements/issues/3335)) ([f859d68](https://github.com/react-native-elements/react-native-elements/commit/f859d685f6415558f26b406cf05741aca84accd6))
* change TextProps from type to interface to enable declaration me… ([#3198](https://github.com/react-native-elements/react-native-elements/issues/3198)) ([c850731](https://github.com/react-native-elements/react-native-elements/commit/c8507312644c1e5bd4228f04a3f09b0f3e8c866e))
* **Dialog:** remove container view ([#3384](https://github.com/react-native-elements/react-native-elements/issues/3384)) ([bcff691](https://github.com/react-native-elements/react-native-elements/commit/bcff691f733aae5b003126575f5e3e55d0500d31))
* **docs:** broken props and links ([29fe60b](https://github.com/react-native-elements/react-native-elements/commit/29fe60b6147fb12169c978e3827d693c4e51b161))
* **FAB:** add small size style ([#3322](https://github.com/react-native-elements/react-native-elements/issues/3322)) ([b4a7296](https://github.com/react-native-elements/react-native-elements/commit/b4a729645b064ae7854eb32eeb060b8c0ac18cc2))
* **Icon:** preserve custom testID property ([#3376](https://github.com/react-native-elements/react-native-elements/issues/3376)) ([9f713f1](https://github.com/react-native-elements/react-native-elements/commit/9f713f158b41e8a40fae92bb5d168d38c7502cc3))
* **ListItem:** remove Accordion height animation ([#3352](https://github.com/react-native-elements/react-native-elements/issues/3352)) ([217f623](https://github.com/react-native-elements/react-native-elements/commit/217f6235cbab43710d0e0cc045d24f9dc3505f6f))
* **Slider:** Fix issues with scrub and allowTouchTrack ([#3203](https://github.com/react-native-elements/react-native-elements/issues/3203)) ([74de9ea](https://github.com/react-native-elements/react-native-elements/commit/74de9ea3b3f0b02f40435aa7367fa602d8150650))
* **themeColors:** add support for dark mode ([#3078](https://github.com/react-native-elements/react-native-elements/issues/3078)) ([8a7743e](https://github.com/react-native-elements/react-native-elements/commit/8a7743ebe6ade1cbab9bd5b0b896d05c65976b20))
### Features
* Add style props to TabView component ([#3191](https://github.com/react-native-elements/react-native-elements/issues/3191)) ([efb76aa](https://github.com/react-native-elements/react-native-elements/commit/efb76aab455b2c93e875f691b82227b838b97ab2))
* **BottomSheet:** add onBackdropPress handler ([#3074](https://github.com/react-native-elements/react-native-elements/issues/3074)) ([de1a02b](https://github.com/react-native-elements/react-native-elements/commit/de1a02b551cd1ef8ea33d164b4bea6d434e5a914))
* **ListItem:** add `onSwipeBegin`,`onSwipeEnd`, resetCallback ([#3180](https://github.com/react-native-elements/react-native-elements/issues/3180)) ([2a5a8b0](https://github.com/react-native-elements/react-native-elements/commit/2a5a8b039da3a6b62d82445815229e244dacde83))
* **Skeleton:** new universal component package ([#3357](https://github.com/react-native-elements/react-native-elements/issues/3357)) ([1cca2db](https://github.com/react-native-elements/react-native-elements/commit/1cca2db1967330ef42a67c9b885a460ed27a4762))
* **Tab:** add horizontally scrollable Tab.Items ([#3336](https://github.com/react-native-elements/react-native-elements/issues/3336)) ([a0a919b](https://github.com/react-native-elements/react-native-elements/commit/a0a919bbda0888bb57fb94c329a59fd6f325cc2d))
* **TabView:** add `disableSwipe` & `disableTransition` prop ([#3372](https://github.com/react-native-elements/react-native-elements/issues/3372)) ([b45e1a9](https://github.com/react-native-elements/react-native-elements/commit/b45e1a9555fb061ca6f7e6102d3c04f9b7cc78e8))

@ -0,0 +1,174 @@
<p align="center">
<a href="https://reactnativeelements.com/">
<img alt="react-native-elements" src="https://user-images.githubusercontent.com/5962998/65694309-a825f000-e043-11e9-8382-db0dba0851e3.png" width="200">
</a>
</p>
<p align="center">
Cross Platform <a href="https://reactnative.dev">React Native</a> UI Toolkit
</p>
<p align="center">
<a href="https://www.npmjs.com/package/@rneui/base"><img src="https://img.shields.io/npm/v/@rneui/base.svg?style=flat-square"></a>
<a href="https://www.npmjs.com/package/@rneui/base"><img src="https://img.shields.io/npm/dm/@rneui/base.svg?style=flat-square"></a>
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square&color=0089E3"></a>
<a href="https://github.com/react-native-elements/react-native-elements"><img src="https://img.shields.io/github/stars/react-native-elements/react-native-elements?label=stars&logo&style=flat-square&color=0089E3"></a>
</p>
<div align="center">
<a href="https://twitter.com/rn_elements"><img src="https://img.shields.io/twitter/follow/rn_elements?style=flat-square&label=Twitter&logo=TWITTER&color=0089E3"></a>
<a href="https://github.com/react-native-elements/react-native-elements/discussions"><img src="https://img.shields.io/github/discussions/react-native-elements/react-native-elements?label=Discussions&logo=github&style=flat-square"></a>
<a href="https://react-native-elements-slack.herokuapp.com"><img src="https://img.shields.io/badge/Join-Slack-4A154B?style=flat-square&logo=slack&color=0089E3&"></a>
</div>
<p align="center">
<a href="#backers"><img src="https://opencollective.com/react-native-elements/backers/badge.svg?style=flat-square&color=0089E3"></a>
<a href="#sponsors"><img src="https://opencollective.com/react-native-elements/sponsors/badge.svg?style=flat-square&color=0089E3&logo=opencollective"></a>
<a href="https://github.com/sponsors/react-native-elements"><img src="https://img.shields.io/github/sponsors/react-native-elements?label=Sponsor&logo=githubsponsors&style=flat-square"></a>
</p>
<br />
![React Native Elements UI Toolkit](https://user-images.githubusercontent.com/5962998/37248832-a7060286-24b1-11e8-94a8-847ab6ded4ec.png)
## Installation
```bash
npm install @rneui/base
```
Follow
[these instructions](https://reactnativeelements.com/docs/)
to install React Native Elements!
## Usage
Start using the components or try it on Snack
[here](https://snack.expo.io/rJu6gJfBZ).
```js
import { Button } from '@rneui/base';
const App = () => <Button title="Hello World" />;
```
## React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and [React Native for Web](https://github.com/necolas/react-native-web).
Click [here](https://reactnativeelements.com/blog/2018/12/13/react-native-web) for a full walkthrough using React Native Elements + React Native Web.
## Expo demo app
Checkout the official
[React Native Elements App](https://expo.dev/@rn_elements/react-native-elements)
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
[here](https://github.com/react-native-elements/react-native-elements/tree/next/example) to
view the implementation & run the RNE expo app locally.
## VS Code Extension
Install the [React Native Elements VS Code Extension](https://marketplace.visualstudio.com/items?itemName=rne.snippets) to speed up development.
## Documentation
[View the full docs here](https://reactnativeelements.com/docs)
## Contributing
Interested in contributing to this repo? Check out our
[Contributing Guide](https://reactnativeelements.com/docs/contributing)
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
<a href="https://github.com/react-native-elements/react-native-elements/graphs/contributors"><img src="https://opencollective.com/react-native-elements/contributors.svg?width=890&button=false" /></a>
### First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label `Good First Issue` on the issues. Click
[here](https://github.com/react-native-elements/react-native-elements/labels/%F0%9F%91%B6%20Good%20First%20Issue)
to see them.
If there is something you's like to see or request a new feature, please submit
an
[issue](https://github.com/react-native-elements/react-native-elements/issues/new)
or a
[pull request](https://github.com/react-native-elements/react-native-elements/pulls).
### Core Contributors
We are currently looking for new core contributors that can help lead this project.
[Learn more here](https://github.com/react-native-elements/react-native-elements/issues/2222)
### Slack Community
In case you have any other question or would like to come say **Hi!** to the RNE
community, join our [Slack team](https://react-native-elements-slack.herokuapp.com).
See you on the other side! 👋😃
## Backers
[Become a backer](https://opencollective.com/react-native-elements#backer) and show your support for React Native Elements.
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/0/avatar)](https://opencollective.com/react-native-elements/backer/0/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/1/avatar)](https://opencollective.com/react-native-elements/backer/1/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/2/avatar)](https://opencollective.com/react-native-elements/backer/2/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/3/avatar)](https://opencollective.com/react-native-elements/backer/3/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/4/avatar)](https://opencollective.com/react-native-elements/backer/4/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/5/avatar)](https://opencollective.com/react-native-elements/backer/5/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/6/avatar)](https://opencollective.com/react-native-elements/backer/6/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/7/avatar)](https://opencollective.com/react-native-elements/backer/7/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/8/avatar)](https://opencollective.com/react-native-elements/backer/8/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/9/avatar)](https://opencollective.com/react-native-elements/backer/9/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/10/avatar)](https://opencollective.com/react-native-elements/backer/10/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/11/avatar)](https://opencollective.com/react-native-elements/backer/11/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/12/avatar)](https://opencollective.com/react-native-elements/backer/12/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/13/avatar)](https://opencollective.com/react-native-elements/backer/13/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/14/avatar)](https://opencollective.com/react-native-elements/backer/14/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/15/avatar)](https://opencollective.com/react-native-elements/backer/15/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/16/avatar)](https://opencollective.com/react-native-elements/backer/16/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/17/avatar)](https://opencollective.com/react-native-elements/backer/17/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/18/avatar)](https://opencollective.com/react-native-elements/backer/18/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/19/avatar)](https://opencollective.com/react-native-elements/backer/19/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/20/avatar)](https://opencollective.com/react-native-elements/backer/20/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/21/avatar)](https://opencollective.com/react-native-elements/backer/21/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/22/avatar)](https://opencollective.com/react-native-elements/backer/22/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/23/avatar)](https://opencollective.com/react-native-elements/backer/23/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/24/avatar)](https://opencollective.com/react-native-elements/backer/24/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/25/avatar)](https://opencollective.com/react-native-elements/backer/25/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/26/avatar)](https://opencollective.com/react-native-elements/backer/26/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/27/avatar)](https://opencollective.com/react-native-elements/backer/27/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/28/avatar)](https://opencollective.com/react-native-elements/backer/28/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/29/avatar)](https://opencollective.com/react-native-elements/backer/29/website)
## Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show [on GitHub](https://github.com/react-native-elements/react-native-elements#sponsors) and link to your website - who doesn't want a little extra exposure? [Here's the info](https://opencollective.com/react-native-elements#sponsor).
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/0/avatar)](https://opencollective.com/react-native-elements/sponsor/0/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/1/avatar)](https://opencollective.com/react-native-elements/sponsor/1/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/2/avatar)](https://opencollective.com/react-native-elements/sponsor/2/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/3/avatar)](https://opencollective.com/react-native-elements/sponsor/3/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/4/avatar)](https://opencollective.com/react-native-elements/sponsor/4/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/5/avatar)](https://opencollective.com/react-native-elements/sponsor/5/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/6/avatar)](https://opencollective.com/react-native-elements/sponsor/6/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/7/avatar)](https://opencollective.com/react-native-elements/sponsor/7/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/8/avatar)](https://opencollective.com/react-native-elements/sponsor/8/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/9/avatar)](https://opencollective.com/react-native-elements/sponsor/9/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/10/avatar)](https://opencollective.com/react-native-elements/sponsor/10/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/11/avatar)](https://opencollective.com/react-native-elements/sponsor/11/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/12/avatar)](https://opencollective.com/react-native-elements/sponsor/12/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/13/avatar)](https://opencollective.com/react-native-elements/sponsor/13/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/14/avatar)](https://opencollective.com/react-native-elements/sponsor/14/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/15/avatar)](https://opencollective.com/react-native-elements/sponsor/15/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/16/avatar)](https://opencollective.com/react-native-elements/sponsor/16/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/17/avatar)](https://opencollective.com/react-native-elements/sponsor/17/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/18/avatar)](https://opencollective.com/react-native-elements/sponsor/18/website)
[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/19/avatar)](https://opencollective.com/react-native-elements/sponsor/19/website)

@ -0,0 +1,5 @@
import { TapRatingProps as RatingProps } from 'react-native-ratings';
import { RneFunctionComponent } from '../helpers';
export interface TapRatingProps extends RatingProps {
}
export declare const AirbnbRating: RneFunctionComponent<TapRatingProps>;

@ -0,0 +1,6 @@
import React from 'react';
import { AirbnbRating as TapRating, } from 'react-native-ratings';
export const AirbnbRating = (props) => {
return React.createElement(TapRating, Object.assign({}, props));
};
AirbnbRating.displayName = 'AirbnbRating';

@ -0,0 +1,3 @@
import { AirbnbRating, TapRatingProps } from './AirbnbRating';
export { AirbnbRating };
export type { TapRatingProps };

@ -0,0 +1,2 @@
import { AirbnbRating } from './AirbnbRating';
export { AirbnbRating };

@ -0,0 +1,9 @@
import { StyleProp, ViewStyle, ColorValue } from 'react-native';
import { ImageProps } from '../Image';
import { IconProps } from '../Icon';
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
export declare type AccessoryProps = Partial<IconProps> & Partial<ImageProps> & InlinePressableProps & {
underlayColor?: ColorValue;
style?: StyleProp<ViewStyle>;
};
export declare const Accessory: RneFunctionComponent<AccessoryProps>;

@ -0,0 +1,47 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Pressable, View, Platform, StyleSheet, } from 'react-native';
import { Image } from '../Image';
import { Icon } from '../Icon';
import { androidRipple, } from '../helpers';
export const Accessory = (_a) => {
var { size = 10, style, underlayColor = '#000', onPress, onLongPress, onPressIn, onPressOut, source, pressableProps } = _a, rest = __rest(_a, ["size", "style", "underlayColor", "onPress", "onLongPress", "onPressIn", "onPressOut", "source", "pressableProps"]);
return (React.createElement(Pressable, Object.assign({}, Object.assign({ android_ripple: (onPress || onLongPress) && androidRipple(underlayColor) }, pressableProps), { style: [
styles.accessory,
{
width: size,
height: size,
borderRadius: size / 2,
},
style,
] }, { onPressOut, onPressIn, onPress, onLongPress }),
React.createElement(View, null, source ? (React.createElement(Image, Object.assign({ source: source, style: {
width: size,
height: size,
borderRadius: size / 2,
} }, rest))) : (React.createElement(Icon, Object.assign({ name: "mode-edit", type: "material", color: "#fff", size: size * 0.8 }, rest))))));
};
const styles = StyleSheet.create({
accessory: Object.assign({ position: 'absolute', bottom: 0, right: 0, alignItems: 'center', justifyContent: 'center', backgroundColor: '#aaa' }, Platform.select({
android: {
elevation: 1,
},
default: {
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowRadius: 2,
shadowOpacity: 0.5,
},
})),
});
Accessory.displayName = 'Avatar.Accessory';

@ -0,0 +1,35 @@
import React from 'react';
import { StyleProp, ViewStyle, TextStyle, ImageSourcePropType, ImageStyle } from 'react-native';
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
import { IconObject } from '../Icon';
import { ImageProps } from '../Image';
export declare const avatarSizes: {
small: number;
medium: number;
large: number;
xlarge: number;
};
declare type AvatarIcon = IconObject & {
iconStyle?: StyleProp<TextStyle>;
};
export interface AvatarProps extends InlinePressableProps {
Component?: typeof React.Component;
onPress?(): void;
onLongPress?(): void;
containerStyle?: StyleProp<ViewStyle>;
source?: ImageSourcePropType;
avatarStyle?: ImageStyle;
rounded?: boolean;
title?: string;
titleStyle?: StyleProp<TextStyle>;
overlayContainerStyle?: StyleProp<TextStyle>;
icon?: AvatarIcon;
iconStyle?: StyleProp<TextStyle>;
size?: ('small' | 'medium' | 'large' | 'xlarge') | number;
placeholderStyle?: StyleProp<ViewStyle>;
renderPlaceholderContent?: React.ReactElement<{}>;
imageProps?: Partial<ImageProps>;
ImageComponent?: React.ComponentClass;
}
export declare const Avatar: RneFunctionComponent<AvatarProps>;
export {};

@ -0,0 +1,89 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { View, Text, Image as RNImage, StyleSheet, Pressable, } from 'react-native';
import { renderNode, } from '../helpers';
import { Icon } from '../Icon';
import { Image } from '../Image';
export const avatarSizes = {
small: 34,
medium: 50,
large: 75,
xlarge: 150,
};
export const Avatar = (_a) => {
var { onPress, onLongPress, onPressIn, onPressOut, Component = onPress || onLongPress || onPressIn || onPressOut
? Pressable
: View, containerStyle, icon, iconStyle, source, size = 'small', avatarStyle, rounded, title, titleStyle, overlayContainerStyle, imageProps, placeholderStyle, renderPlaceholderContent, ImageComponent = RNImage, children, pressableProps } = _a, rest = __rest(_a, ["onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "containerStyle", "icon", "iconStyle", "source", "size", "avatarStyle", "rounded", "title", "titleStyle", "overlayContainerStyle", "imageProps", "placeholderStyle", "renderPlaceholderContent", "ImageComponent", "children", "pressableProps"]);
const width = typeof size === 'number' ? size : avatarSizes[size] || avatarSizes.small;
const height = width;
const titleSize = width / 2;
const iconSize = width / 2;
const PlaceholderContent = (renderPlaceholderContent &&
renderNode(undefined, renderPlaceholderContent)) ||
(title && (React.createElement(Text, { style: StyleSheet.flatten([
styles.title,
{ fontSize: titleSize },
titleStyle,
]) }, title))) ||
(icon && (React.createElement(Icon, { style: StyleSheet.flatten([iconStyle && iconStyle]), color: icon.color || 'white', name: icon.name || 'account', size: icon.size || iconSize, type: icon.type || 'material-community' })));
const hidePlaceholder = !(source && source.uri);
const imageContainerStyle = StyleSheet.flatten([
styles.overlayContainer,
rounded && { borderRadius: width / 2, overflow: 'hidden' },
overlayContainerStyle,
imageProps && imageProps.containerStyle,
]);
if (imageProps && imageProps.containerStyle) {
delete imageProps.containerStyle;
}
return (React.createElement(Component, Object.assign({ style: StyleSheet.flatten([
styles.container,
{ height, width },
rounded && { borderRadius: width / 2 },
containerStyle,
]) }, Object.assign(Object.assign({ onPress,
onLongPress,
onPressIn,
onPressOut }, pressableProps), rest)),
React.createElement(Image, Object.assign({ testID: "RNE__Avatar__Image", placeholderStyle: StyleSheet.flatten([
placeholderStyle,
hidePlaceholder && styles.hiddenPlaceholderStyle,
]), PlaceholderContent: PlaceholderContent, containerStyle: imageContainerStyle, source: source, borderRadius: rounded ? width / 2 : undefined }, imageProps, { style: StyleSheet.flatten([
styles.avatar,
imageProps && imageProps.style,
avatarStyle,
]), ImageComponent: ImageComponent })),
children));
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
},
avatar: {
flex: 1,
width: undefined,
height: undefined,
},
overlayContainer: {
flex: 1,
},
title: {
color: '#ffffff',
backgroundColor: 'transparent',
textAlign: 'center',
},
hiddenPlaceholderStyle: {
backgroundColor: 'transparent',
},
});
Avatar.displayName = 'Avatar';

@ -0,0 +1,7 @@
import { AvatarProps } from './Avatar';
import { Accessory, AccessoryProps } from './Avatar.Accessory';
declare const Avatar: import("..").RneFunctionComponent<AvatarProps> & {
Accessory: import("..").RneFunctionComponent<AccessoryProps>;
};
export { Avatar, Accessory };
export type { AccessoryProps, AvatarProps };

@ -0,0 +1,6 @@
import { Avatar as AvatarBase } from './Avatar';
import { Accessory } from './Avatar.Accessory';
const Avatar = Object.assign(AvatarBase, {
Accessory,
});
export { Avatar, Accessory };

@ -0,0 +1,13 @@
import React from 'react';
import { TextProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
export interface BadgeProps extends InlinePressableProps {
containerStyle?: StyleProp<ViewStyle>;
badgeStyle?: StyleProp<ViewStyle>;
textProps?: TextProps;
textStyle?: StyleProp<TextStyle>;
value?: React.ReactNode;
Component?: typeof React.Component;
status?: 'primary' | 'success' | 'warning' | 'error';
}
export declare const Badge: RneFunctionComponent<BadgeProps>;

@ -0,0 +1,57 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet, Text, View, Pressable, } from 'react-native';
import { defaultTheme, renderNode, } from '../helpers';
export const Badge = (_a) => {
var _b;
var { containerStyle, textStyle, textProps, badgeStyle, onPress, onLongPress, onPressOut, onPressIn, Component = onPress || onLongPress || onPressIn || onPressOut
? Pressable
: View, value, theme = defaultTheme, status = 'primary', pressableProps } = _a, rest = __rest(_a, ["containerStyle", "textStyle", "textProps", "badgeStyle", "onPress", "onLongPress", "onPressOut", "onPressIn", "Component", "value", "theme", "status", "pressableProps"]);
const element = renderNode(Text, value, Object.assign({ style: StyleSheet.flatten([styles.text, textStyle && textStyle]) }, textProps));
return (React.createElement(View, { testID: "RNE__Badge__Container", style: StyleSheet.flatten([containerStyle && containerStyle]) },
React.createElement(Component, Object.assign({}, Object.assign(Object.assign({ onPress,
onLongPress,
onPressOut,
onPressIn }, pressableProps), rest), { testID: "RNE__Badge", style: StyleSheet.flatten([
{
alignSelf: 'center',
minWidth: size,
height: size,
borderRadius: size / 2,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b[status],
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#fff',
},
!element && styles.miniBadge,
badgeStyle && badgeStyle,
]) }), element)));
};
const size = 18;
const miniSize = 8;
const styles = StyleSheet.create({
miniBadge: {
paddingHorizontal: 0,
paddingVertical: 0,
minWidth: miniSize,
height: miniSize,
borderRadius: miniSize / 2,
},
text: {
fontSize: 12,
color: 'white',
paddingHorizontal: 4,
},
});
Badge.displayName = 'Badge';

@ -0,0 +1,4 @@
import { Badge, BadgeProps } from './Badge';
import { withBadge } from './withBadge';
export { withBadge, Badge };
export type { BadgeProps };

@ -0,0 +1,3 @@
import { Badge } from './Badge';
import { withBadge } from './withBadge';
export { withBadge, Badge };

@ -0,0 +1,13 @@
import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { BadgeProps } from './Badge';
declare type withBadgeOptions = {
bottom?: number;
left?: number;
right?: number;
top?: number;
hidden?: boolean;
containerStyle?: StyleProp<ViewStyle>;
} & BadgeProps;
export declare const withBadge: (value: React.ReactNode | ((props: any) => React.ReactNode), options?: withBadgeOptions) => (WrappedComponent: React.ComponentType<any>) => React.ComponentType;
export {};

@ -0,0 +1,43 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Badge } from './Badge';
export const withBadge = (value, options = {}) => (WrappedComponent) => {
const WithBadge = (props) => {
const { bottom, hidden = false, left, containerStyle } = options, badgeProps = __rest(options, ["bottom", "hidden", "left", "containerStyle"]);
let { right = -16, top = -1 } = options;
if (!value) {
right = -3;
top = 3;
}
const badgeValue = typeof value === 'function' ? value(props) : value;
return (React.createElement(View, { style: StyleSheet.flatten([styles.container, containerStyle]) },
React.createElement(WrappedComponent, Object.assign({}, props)),
!hidden && (React.createElement(Badge, Object.assign({ value: badgeValue, status: "error", containerStyle: StyleSheet.flatten([
styles.badgeContainer,
{ bottom, left, right, top },
]) }, badgeProps)))));
};
WithBadge.displayName = `WithBadge(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
return WithBadge;
};
const styles = StyleSheet.create({
badgeContainer: {
position: 'absolute',
},
container: {
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
},
});

@ -0,0 +1,11 @@
import { StyleProp, ViewStyle, ModalProps, ScrollViewProps } from 'react-native';
import { RneFunctionComponent } from '../helpers';
export interface BottomSheetProps {
containerStyle?: StyleProp<ViewStyle>;
modalProps?: ModalProps;
backdropStyle?: StyleProp<ViewStyle>;
onBackdropPress?(): void;
isVisible?: boolean;
scrollViewProps?: ScrollViewProps;
}
export declare const BottomSheet: RneFunctionComponent<BottomSheetProps>;

@ -0,0 +1,33 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Modal, View, StyleSheet, Pressable, ScrollView, } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
export const BottomSheet = (_a) => {
var { containerStyle, backdropStyle, onBackdropPress = () => null, isVisible = false, modalProps = {}, children, scrollViewProps = {} } = _a, rest = __rest(_a, ["containerStyle", "backdropStyle", "onBackdropPress", "isVisible", "modalProps", "children", "scrollViewProps"]);
return (React.createElement(Modal, Object.assign({ animationType: "slide", onRequestClose: onBackdropPress, transparent: true, visible: isVisible }, modalProps),
React.createElement(Pressable, { onPress: onBackdropPress, style: [StyleSheet.absoluteFill, backdropStyle], testID: "RNE__Overlay__backdrop" }),
React.createElement(SafeAreaView, Object.assign({ style: StyleSheet.flatten([
styles.safeAreaView,
containerStyle && containerStyle,
]), pointerEvents: "box-none" }, rest),
React.createElement(View, null,
React.createElement(ScrollView, Object.assign({}, scrollViewProps), children)))));
};
const styles = StyleSheet.create({
safeAreaView: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.2)',
flexDirection: 'column-reverse',
},
});
BottomSheet.displayName = 'BottomSheet';

@ -0,0 +1,3 @@
import { BottomSheet, BottomSheetProps } from './BottomSheet';
export { BottomSheet };
export type { BottomSheetProps };

@ -0,0 +1,2 @@
import { BottomSheet } from './BottomSheet';
export { BottomSheet };

@ -0,0 +1,32 @@
import React from 'react';
import { ActivityIndicatorProps, StyleProp, TextStyle, TouchableNativeFeedbackProps, TouchableOpacityProps, ViewStyle } from 'react-native';
import { StringOmit, RneFunctionComponent, ThemeSpacing } from '../helpers';
import { IconNode } from '../Icon';
import { TextProps } from '../Text';
export interface ButtonProps extends TouchableOpacityProps, TouchableNativeFeedbackProps {
title?: string | React.ReactElement<{}>;
titleStyle?: StyleProp<TextStyle>;
titleProps?: TextProps;
buttonStyle?: StyleProp<ViewStyle>;
type?: 'solid' | 'clear' | 'outline';
loading?: boolean;
loadingStyle?: StyleProp<ViewStyle>;
loadingProps?: ActivityIndicatorProps;
containerStyle?: StyleProp<ViewStyle>;
icon?: IconNode;
iconContainerStyle?: StyleProp<ViewStyle>;
iconRight?: boolean;
linearGradientProps?: object;
TouchableComponent?: typeof React.Component;
ViewComponent?: typeof React.Component;
disabled?: boolean;
disabledStyle?: StyleProp<ViewStyle>;
disabledTitleStyle?: StyleProp<TextStyle>;
raised?: boolean;
iconPosition?: 'left' | 'right' | 'top' | 'bottom';
uppercase?: boolean;
radius?: number | StringOmit<keyof ThemeSpacing>;
size?: 'sm' | 'md' | 'lg';
color?: StringOmit<'primary' | 'secondary' | 'success' | 'error' | 'warning'>;
}
export declare const Button: RneFunctionComponent<ButtonProps>;

@ -0,0 +1,169 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import Color from 'color';
import React, { useCallback, useEffect, useMemo } from 'react';
import { ActivityIndicator, Platform, StyleSheet, Text, TouchableNativeFeedback, TouchableOpacity, View, } from 'react-native';
import { color, defaultTheme, renderNode, } from '../helpers';
import { Icon } from '../Icon';
const defaultLoadingProps = (type, theme) => {
var _a;
return ({
color: type === 'solid' ? 'white' : (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
size: 'small',
});
};
const positionStyle = {
top: 'column',
bottom: 'column-reverse',
left: 'row',
right: 'row-reverse',
};
export const Button = (_a) => {
var _b, _c, _d, _e, _f, _g, _h;
var { TouchableComponent, containerStyle, onPress = () => { }, buttonStyle, type = 'solid', loading = false, loadingStyle, loadingProps: passedLoadingProps, size = 'md', radius = 'xs', uppercase = false, color: buttonColor = 'primary', title = '', titleProps, titleStyle: passedTitleStyle, icon, iconContainerStyle, iconRight = false, disabled = false, disabledStyle, disabledTitleStyle, raised = false, linearGradientProps, ViewComponent = View, theme = defaultTheme, iconPosition = 'left', children = title } = _a, rest = __rest(_a, ["TouchableComponent", "containerStyle", "onPress", "buttonStyle", "type", "loading", "loadingStyle", "loadingProps", "size", "radius", "uppercase", "color", "title", "titleProps", "titleStyle", "icon", "iconContainerStyle", "iconRight", "disabled", "disabledStyle", "disabledTitleStyle", "raised", "linearGradientProps", "ViewComponent", "theme", "iconPosition", "children"]);
useEffect(() => {
if (linearGradientProps && !ViewComponent) {
console.warn("You need to pass a ViewComponent to use linearGradientProps !\nExample: ViewComponent={require('react-native-linear-gradient')}");
}
});
const handleOnPress = useCallback((evt) => {
if (!loading && !disabled) {
onPress(evt);
}
}, [loading, onPress, disabled]);
const TouchableComponentInternal = TouchableComponent ||
Platform.select({
android: linearGradientProps ? TouchableOpacity : TouchableNativeFeedback,
default: TouchableOpacity,
});
const titleStyle = useMemo(() => {
var _a, _b;
return StyleSheet.flatten([
{
color: type === 'solid' ? 'white' : (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
},
uppercase && { textTransform: 'uppercase' },
styles.title,
passedTitleStyle,
disabled && {
color: color((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.disabled).darken(0.3).string(),
},
disabled && disabledTitleStyle,
]);
}, [
disabled,
disabledTitleStyle,
passedTitleStyle,
(_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.disabled,
(_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
type,
uppercase,
]);
const background = Platform.OS === 'android' && Platform.Version >= 21
? TouchableNativeFeedback.Ripple(Color((_d = titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color) === null || _d === void 0 ? void 0 : _d.toString()).alpha(0.32).rgb().string(), false)
: undefined;
const loadingProps = useMemo(() => (Object.assign(Object.assign({}, defaultLoadingProps(type, theme)), passedLoadingProps)), [passedLoadingProps, theme, type]);
const accessibilityState = useMemo(() => ({
disabled: !!disabled,
busy: !!loading,
}), [disabled, loading]);
const borderRadius = useMemo(() => {
var _a;
return Number((_a = theme.spacing[radius]) !== null && _a !== void 0 ? _a : (radius || '0')) || 0;
}, [radius, theme]);
return (React.createElement(View, { style: [
styles.container,
{ borderRadius },
containerStyle,
raised && !disabled && type !== 'clear' && styles.raised,
], testID: "RNE_BUTTON_WRAPPER" },
React.createElement(TouchableComponentInternal, Object.assign({ onPress: handleOnPress, delayPressIn: 0, activeOpacity: 0.3, accessibilityRole: "button", accessibilityState: accessibilityState, disabled: disabled, background: background }, rest),
React.createElement(ViewComponent, Object.assign({}, linearGradientProps, { style: StyleSheet.flatten([
styles.button,
{
padding: theme.spacing[size],
paddingHorizontal: theme.spacing[size] + 2,
borderRadius,
flexDirection: positionStyle[iconRight ? 'right' : iconPosition] || 'row',
backgroundColor: type === 'solid'
? theme.colors[buttonColor] ||
buttonColor ||
((_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.primary)
: 'transparent',
borderColor: (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.primary,
borderWidth: type === 'outline' ? StyleSheet.hairlineWidth : 0,
},
buttonStyle,
disabled &&
type === 'solid' && {
backgroundColor: (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.disabled,
},
disabled &&
type === 'outline' && {
borderColor: color((_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.disabled)
.darken(0.3)
.string(),
},
disabled && disabledStyle,
]) }),
loading && (React.createElement(ActivityIndicator, Object.assign({ style: StyleSheet.flatten([styles.loading, loadingStyle]), color: loadingProps.color, size: loadingProps.size }, loadingProps))),
!loading &&
icon &&
renderNode(Icon, icon, {
containerStyle: StyleSheet.flatten([
styles.iconContainer,
iconContainerStyle,
]),
}),
!loading &&
React.Children.toArray(children).map((child, index) => (React.createElement(React.Fragment, { key: index }, typeof child === 'string'
? renderNode(Text, child, Object.assign({ style: Object.assign({}, titleStyle) }, titleProps))
: child)))))));
};
const styles = StyleSheet.create({
button: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: defaultTheme.spacing.md,
paddingHorizontal: defaultTheme.spacing.lg,
},
container: {
overflow: 'hidden',
},
title: Object.assign({ fontSize: 16, textAlign: 'center', paddingVertical: 1 }, Platform.select({
android: {
fontFamily: 'sans-serif-medium',
},
default: {
fontSize: 18,
},
})),
iconContainer: {
marginHorizontal: 5,
},
raised: Object.assign({ backgroundColor: '#fff', overflow: 'visible' }, Platform.select({
android: {
elevation: 4,
},
default: {
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
},
})),
loading: {
marginVertical: 2,
},
});
Button.displayName = 'Button';

@ -0,0 +1,3 @@
import { Button, ButtonProps } from './Button';
export { Button };
export type { ButtonProps };

@ -0,0 +1,2 @@
import { Button } from './Button';
export { Button };

@ -0,0 +1,41 @@
import React from 'react';
import { ViewStyle, StyleProp, TextStyle } from 'react-native';
import { RneFunctionComponent, InlinePressableProps } from '../helpers';
declare type ButtonComponent = React.ReactElement;
declare type ButtonObject = {
element: React.ElementType<any & {
isSelected?: boolean;
}>;
};
export interface ButtonGroupProps extends InlinePressableProps {
button?: object;
Component?: typeof React.Component;
onPress?(...args: any[]): void;
buttons?: (string | ButtonComponent | ButtonObject)[];
containerStyle?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
selectedTextStyle?: StyleProp<TextStyle>;
selectedButtonStyle?: StyleProp<ViewStyle>;
underlayColor?: string;
selectedIndex?: number | null;
selectedIndexes?: number[];
activeOpacity?: number;
onHideUnderlay?(): void;
onShowUnderlay?(): void;
setOpacityTo?: (value: number) => void;
innerBorderStyle?: {
color?: string;
width?: number;
};
buttonStyle?: StyleProp<ViewStyle>;
buttonContainerStyle?: StyleProp<ViewStyle>;
selectMultiple?: boolean;
disabled?: boolean | number[];
disabledStyle?: StyleProp<ViewStyle>;
disabledTextStyle?: StyleProp<TextStyle>;
disabledSelectedStyle?: StyleProp<ViewStyle>;
disabledSelectedTextStyle?: StyleProp<TextStyle>;
vertical?: boolean;
}
export declare const ButtonGroup: RneFunctionComponent<ButtonGroupProps>;
export {};

@ -0,0 +1,132 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import Color from 'color';
import React from 'react';
import { View, Platform, StyleSheet, Pressable, } from 'react-native';
import { normalizeText, color, androidRipple, defaultTheme, } from '../helpers';
import { Text } from '../Text';
export const ButtonGroup = (_a) => {
var _b, _c;
var { Component = Pressable, pressableProps, buttons, onPress = () => null, onLongPress, onPressIn, onPressOut, selectedIndex = null, selectedIndexes = [], selectMultiple = false, containerStyle, innerBorderStyle, buttonStyle, buttonContainerStyle, textStyle, selectedTextStyle, selectedButtonStyle, activeOpacity, onHideUnderlay, onShowUnderlay, setOpacityTo, disabled = false, disabledStyle, disabledTextStyle, disabledSelectedStyle, disabledSelectedTextStyle, vertical = false, theme = defaultTheme, underlayColor = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary } = _a, rest = __rest(_a, ["Component", "pressableProps", "buttons", "onPress", "onLongPress", "onPressIn", "onPressOut", "selectedIndex", "selectedIndexes", "selectMultiple", "containerStyle", "innerBorderStyle", "buttonStyle", "buttonContainerStyle", "textStyle", "selectedTextStyle", "selectedButtonStyle", "activeOpacity", "onHideUnderlay", "onShowUnderlay", "setOpacityTo", "disabled", "disabledStyle", "disabledTextStyle", "disabledSelectedStyle", "disabledSelectedTextStyle", "vertical", "theme", "underlayColor"]);
let innerBorderWidth = (_c = innerBorderStyle === null || innerBorderStyle === void 0 ? void 0 : innerBorderStyle.width) !== null && _c !== void 0 ? _c : 1;
return (React.createElement(View, Object.assign({ testID: "RNE__ButtonGroupContainer" }, rest, { style: StyleSheet.flatten([
styles.container,
vertical && styles.verticalContainer,
containerStyle && containerStyle,
]) }), buttons === null || buttons === void 0 ? void 0 : buttons.map((button, i) => {
var _a, _b, _c, _d, _e, _f;
const isSelected = selectedIndex === i || selectedIndexes.includes(i);
const isDisabled = disabled === true ||
(Array.isArray(disabled) && disabled.includes(i));
return (React.createElement(View, { key: i, style: StyleSheet.flatten([
!vertical && styles.button,
vertical && styles.verticalComponent,
i !== buttons.length - 1 &&
(vertical
? {
borderBottomWidth: innerBorderWidth,
borderBottomColor: (innerBorderStyle && innerBorderStyle.color) ||
((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.grey4),
}
: {
borderRightWidth: innerBorderWidth,
borderRightColor: (innerBorderStyle && innerBorderStyle.color) ||
((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey4),
}),
buttonContainerStyle,
]) },
React.createElement(Component, Object.assign({ testID: "RNE__ButtonGroupItem", accessibilityState: {
disabled: isDisabled,
}, activeOpacity: activeOpacity, setOpacityTo: setOpacityTo, onHideUnderlay: onHideUnderlay, onShowUnderlay: onShowUnderlay, disabled: isDisabled, onPress: () => {
if (selectMultiple) {
if (selectedIndexes.includes(i)) {
onPress(selectedIndexes.filter((index) => index !== i));
}
else {
onPress([...selectedIndexes, i]);
}
}
else {
onPress(i);
}
}, style: styles.button }, Object.assign({ android_ripple: androidRipple(Color(underlayColor).alpha(activeOpacity).rgb().toString()), onPressIn,
onPressOut,
onLongPress }, pressableProps)),
React.createElement(View, { style: StyleSheet.flatten([
styles.textContainer,
buttonStyle && buttonStyle,
isSelected && {
backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
},
isSelected && selectedButtonStyle && selectedButtonStyle,
isDisabled && styles.disabled,
isDisabled && disabledStyle,
isDisabled &&
isSelected && {
backgroundColor: (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.disabled,
},
isDisabled && isSelected && disabledSelectedStyle,
]) }, hasElementKey(button) ? (React.createElement(button.element, { isSelected: isSelected })) : (React.createElement(Text, { testID: "buttonGroupItemText", style: StyleSheet.flatten([
Object.assign({ fontSize: normalizeText(13), color: (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.grey2 }, Platform.select({
android: {},
default: {
fontWeight: '500',
},
})),
textStyle && textStyle,
isSelected && { color: '#fff' },
isSelected && selectedTextStyle,
isDisabled && {
color: color((_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.disabled)
.darken(0.3)
.toString(),
},
isDisabled && disabledTextStyle,
isDisabled && isSelected && disabledSelectedTextStyle,
]) }, button))))));
})));
};
const styles = StyleSheet.create({
button: {
flex: 1,
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
marginHorizontal: 10,
marginVertical: 5,
borderColor: '#e3e3e3',
borderWidth: 1,
flexDirection: 'row',
borderRadius: 3,
overflow: 'hidden',
backgroundColor: '#fff',
height: 40,
},
verticalContainer: {
flexDirection: 'column',
height: null,
},
verticalComponent: {
height: 40,
},
disabled: {
backgroundColor: 'transparent',
},
});
ButtonGroup.displayName = 'ButtonGroup';
const hasElementKey = (button) => {
return (typeof button === 'object' && Boolean(button.element));
};

@ -0,0 +1,3 @@
import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
export { ButtonGroup };
export type { ButtonGroupProps };

@ -0,0 +1,2 @@
import { ButtonGroup } from './ButtonGroup';
export { ButtonGroup };

@ -0,0 +1,5 @@
import { DividerProps } from '../Divider';
import { RneFunctionComponent } from '../helpers';
export interface CardDividerProps extends DividerProps {
}
export declare const CardDivider: RneFunctionComponent<CardDividerProps>;

@ -0,0 +1,24 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet } from 'react-native';
import { Divider } from '../Divider';
export const CardDivider = (_a) => {
var { style } = _a, rest = __rest(_a, ["style"]);
return React.createElement(Divider, Object.assign({ style: StyleSheet.flatten([styles.divider, style]) }, rest));
};
const styles = StyleSheet.create({
divider: {
marginBottom: 15,
},
});
CardDivider.displayName = 'Card.Divider';

@ -0,0 +1,5 @@
import { TextProps } from '../Text';
import { RneFunctionComponent } from '../helpers';
export interface CardFeaturedSubtitleProps extends TextProps {
}
export declare const CardFeaturedSubtitle: RneFunctionComponent<CardFeaturedSubtitleProps>;

@ -0,0 +1,31 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
import normalize from '../helpers/normalizeText';
import { fonts } from '../helpers';
import { Text } from '../Text';
import { defaultTheme } from '../helpers';
export const CardFeaturedSubtitle = (_a) => {
var _b;
var { theme = defaultTheme, style } = _a, rest = __rest(_a, ["theme", "style"]);
return (React.createElement(Text, Object.assign({ style: StyleSheet.flatten([
Object.assign({ fontSize: normalize(13), marginBottom: 8, color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.white }, Platform.select({
android: Object.assign({}, fonts.android.black),
default: {
fontWeight: '400',
},
})),
style,
]) }, rest)));
};
CardFeaturedSubtitle.displayName = 'Card.FeaturedSubtitle';

@ -0,0 +1,5 @@
import { TextProps } from '../Text';
import { RneFunctionComponent } from '../helpers';
export interface CardFeaturedTitleProps extends TextProps {
}
export declare const CardFeaturedTitle: RneFunctionComponent<CardFeaturedTitleProps>;

@ -0,0 +1,31 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
import normalize from '../helpers/normalizeText';
import { fonts } from '../helpers';
import { Text } from '../Text';
import { defaultTheme } from '../helpers';
export const CardFeaturedTitle = (_a) => {
var _b;
var { theme = defaultTheme, style } = _a, rest = __rest(_a, ["theme", "style"]);
return (React.createElement(Text, Object.assign({ style: StyleSheet.flatten([
Object.assign({ fontSize: normalize(18), marginBottom: 8, color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.white }, Platform.select({
android: Object.assign({}, fonts.android.black),
default: {
fontWeight: '800',
},
})),
style,
]) }, rest)));
};
CardFeaturedTitle.displayName = 'Card.FeaturedTitle';

@ -0,0 +1,5 @@
import { RneFunctionComponent } from '../helpers';
import { ImageProps } from '../Image';
export interface CardImageProps extends ImageProps {
}
export declare const CardImage: RneFunctionComponent<CardImageProps>;

@ -0,0 +1,25 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet } from 'react-native';
import { Image } from '../Image';
export const CardImage = (_a) => {
var { style } = _a, props = __rest(_a, ["style"]);
return React.createElement(Image, Object.assign({ style: StyleSheet.flatten([styles.image, style]) }, props));
};
const styles = StyleSheet.create({
image: {
width: null,
height: 150,
},
});
CardImage.displayName = 'Card.Image';

@ -0,0 +1,5 @@
import { TextProps } from '../Text';
import { RneFunctionComponent } from '../helpers';
export interface CardTitleProps extends TextProps {
}
export declare const CardTitle: RneFunctionComponent<CardTitleProps>;

@ -0,0 +1,31 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
import normalize from '../helpers/normalizeText';
import { fonts } from '../helpers';
import { Text } from '../Text';
import { defaultTheme } from '../helpers';
export const CardTitle = (_a) => {
var _b;
var { style, theme = defaultTheme } = _a, rest = __rest(_a, ["style", "theme"]);
return (React.createElement(Text, Object.assign({ testID: "cardTitle", style: StyleSheet.flatten([
Object.assign(Object.assign({ fontSize: normalize(14), color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey1 }, Platform.select({
android: Object.assign({}, fonts.android.black),
default: {
fontWeight: 'bold',
},
})), { textAlign: 'center', marginBottom: 15 }),
style,
]) }, rest)));
};
CardTitle.displayName = 'Card.Title';

@ -0,0 +1,7 @@
import { StyleProp, ViewStyle } from 'react-native';
import { RneFunctionComponent } from '../helpers';
export interface CardProps {
containerStyle?: StyleProp<ViewStyle>;
wrapperStyle?: StyleProp<ViewStyle>;
}
export declare const CardBase: RneFunctionComponent<CardProps>;

@ -0,0 +1,42 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { View, Platform, StyleSheet } from 'react-native';
import { defaultTheme } from '../helpers';
export const CardBase = (_a) => {
var _b, _c;
var { children, containerStyle, wrapperStyle, theme = defaultTheme } = _a, rest = __rest(_a, ["children", "containerStyle", "wrapperStyle", "theme"]);
return (React.createElement(View, Object.assign({}, rest, { style: StyleSheet.flatten([
Object.assign({ backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.white, borderWidth: 1, padding: 15, margin: 15, marginBottom: 0, borderColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey5 }, Platform.select({
android: {
elevation: 1,
},
default: {
shadowColor: 'rgba(0,0,0, .2)',
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 1,
shadowRadius: 1,
},
})),
containerStyle && containerStyle,
]) }),
React.createElement(View, { style: StyleSheet.flatten([
styles.wrapper,
wrapperStyle && wrapperStyle,
]) }, children)));
};
const styles = StyleSheet.create({
wrapper: {
backgroundColor: 'transparent',
},
});
CardBase.displayName = 'Card';

@ -0,0 +1,14 @@
import { CardProps } from './Card';
import { CardDividerProps } from './Card.Divider';
import { CardFeaturedSubtitleProps } from './Card.FeaturedSubtitle';
import { CardFeaturedTitleProps } from './Card.FeaturedTitle';
import { CardImageProps } from './Card.Image';
declare const Card: import("..").RneFunctionComponent<CardProps> & {
Divider: import("..").RneFunctionComponent<CardDividerProps>;
Image: import("..").RneFunctionComponent<CardImageProps>;
Title: import("..").RneFunctionComponent<import("./Card.Title").CardTitleProps>;
FeaturedTitle: import("..").RneFunctionComponent<CardFeaturedTitleProps>;
FeaturedSubtitle: import("..").RneFunctionComponent<CardFeaturedSubtitleProps>;
};
export { Card };
export type { CardProps, CardDividerProps, CardFeaturedSubtitleProps, CardFeaturedTitleProps, CardImageProps, };

@ -0,0 +1,14 @@
import { CardBase } from './Card';
import { CardDivider } from './Card.Divider';
import { CardFeaturedSubtitle, } from './Card.FeaturedSubtitle';
import { CardFeaturedTitle, } from './Card.FeaturedTitle';
import { CardImage } from './Card.Image';
import { CardTitle } from './Card.Title';
const Card = Object.assign(CardBase, {
Divider: CardDivider,
Image: CardImage,
Title: CardTitle,
FeaturedTitle: CardFeaturedTitle,
FeaturedSubtitle: CardFeaturedSubtitle,
});
export { Card };

@ -0,0 +1,21 @@
import React from 'react';
import { TextProps, TextStyle, ViewStyle, StyleProp, PressableProps } from 'react-native';
import { CheckBoxIconProps } from './components/CheckBoxIcon';
import { RneFunctionComponent } from '../helpers';
export interface CheckBoxProps extends PressableProps, CheckBoxIconProps {
Component?: typeof React.Component;
iconRight?: boolean;
title?: string | React.ReactElement<{}>;
titleProps?: TextProps;
center?: boolean;
right?: boolean;
containerStyle?: StyleProp<ViewStyle>;
wrapperStyle?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
disabled?: boolean;
disabledStyle?: StyleProp<ViewStyle>;
disabledTitleStyle?: StyleProp<TextStyle>;
checkedTitle?: string;
fontFamily?: string;
}
export declare const CheckBox: RneFunctionComponent<CheckBoxProps>;

@ -0,0 +1,82 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet, Pressable, View, Platform, } from 'react-native';
import { Text as TextElement } from '../Text';
import { CheckBoxIcon } from './components/CheckBoxIcon';
import { fonts } from '../helpers';
import { color, defaultTheme } from '../helpers';
export const CheckBox = (_a) => {
var _b, _c, _d;
var { checked = false, Component = Pressable, iconRight = false, title, titleProps = {}, center = false, right = false, containerStyle, wrapperStyle, textStyle, checkedTitle, fontFamily, theme = defaultTheme, onPress, onLongPress, disabled = false, disabledStyle, disabledTitleStyle, checkedColor = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary } = _a, rest = __rest(_a, ["checked", "Component", "iconRight", "title", "titleProps", "center", "right", "containerStyle", "wrapperStyle", "textStyle", "checkedTitle", "fontFamily", "theme", "onPress", "onLongPress", "disabled", "disabledStyle", "disabledTitleStyle", "checkedColor"]);
const accessibilityState = {
checked: !!checked,
};
const iconProps = Object.assign({ checked,
onLongPress,
checkedColor }, rest);
return (React.createElement(Component, Object.assign({ accessibilityRole: "checkbox", accessibilityState: accessibilityState, testID: "RNE__CheckBox__Wrapper" }, rest, { disabled: disabled, onLongPress: onLongPress, onPress: onPress, style: StyleSheet.flatten([
{
backgroundColor: theme.colors.background,
borderColor: theme.colors.white,
},
styles.container,
containerStyle && containerStyle,
disabled && disabledStyle,
]) }),
React.createElement(View, { style: StyleSheet.flatten([
styles.wrapper,
right && { justifyContent: 'flex-end' },
center && { justifyContent: 'center' },
wrapperStyle && wrapperStyle,
]) },
!iconRight && (React.createElement(CheckBoxIcon, Object.assign({}, iconProps, { checkedColor: checkedColor }))),
React.isValidElement(title)
? title
: title !== '' &&
title && (React.createElement(TextElement, Object.assign({ testID: "RNE__CheckBox__Title", style: StyleSheet.flatten([
Object.assign({ marginLeft: 10, marginRight: 10, color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey1 }, Platform.select({
android: Object.assign({}, fonts.android.bold),
default: {
fontWeight: 'bold',
},
})),
textStyle && textStyle,
fontFamily && { fontFamily },
disabled && {
color: color((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.disabled)
.darken(0.3)
.string(),
},
disabled && disabledTitleStyle,
]) }, titleProps), checked ? checkedTitle || title : title)),
iconRight && (React.createElement(CheckBoxIcon, Object.assign({}, iconProps, { checkedColor: checkedColor }))))));
};
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
alignItems: 'center',
},
container: {
margin: 5,
marginLeft: 10,
marginRight: 10,
padding: 10,
},
containerHasTitle: {
borderWidth: 1,
borderRadius: 3,
backgroundColor: '#fafafa',
borderColor: '#ededed',
},
});
CheckBox.displayName = 'CheckBox';

@ -0,0 +1,15 @@
import React from 'react';
import { RneFunctionComponent } from '../../helpers';
import { IconType } from '../../Icon';
export interface CheckBoxIconProps {
checked: boolean;
onIconPress?(): void;
onLongIconPress?(): void;
size?: number;
checkedIcon?: string | React.ReactElement<{}>;
uncheckedIcon?: string | React.ReactElement<{}>;
iconType?: IconType;
checkedColor?: string;
uncheckedColor?: string;
}
export declare const CheckBoxIcon: RneFunctionComponent<CheckBoxIconProps>;

@ -0,0 +1,14 @@
import React from 'react';
import getIconType from '../../helpers/getIconType';
export const CheckBoxIcon = ({ checked, onIconPress, onLongIconPress, size = 24, checkedIcon = 'check-square-o', uncheckedIcon = 'square-o', iconType, checkedColor, uncheckedColor = '#bfbfbf', }) => {
if (checked && React.isValidElement(checkedIcon)) {
return checkedIcon;
}
if (!checked && React.isValidElement(uncheckedIcon)) {
return uncheckedIcon;
}
const VectorIcon = iconType
? getIconType(iconType)
: getIconType('font-awesome');
return (React.createElement(VectorIcon, { testID: "RNE__Checkbox__Icon", color: checked ? checkedColor : uncheckedColor, name: checked ? checkedIcon : uncheckedIcon, size: size || 24, style: { minWidth: size || 24 }, onLongPress: onLongIconPress, onPress: onIconPress }));
};

@ -0,0 +1,3 @@
import { CheckBox, CheckBoxProps } from './CheckBox';
export { CheckBox };
export type { CheckBoxProps };

@ -0,0 +1,2 @@
import { CheckBox } from './CheckBox';
export { CheckBox };

@ -0,0 +1,6 @@
import { RneFunctionComponent } from '../helpers';
import { ButtonProps } from '../Button';
export interface ChipProps extends Omit<ButtonProps, 'loading' | 'loadingStyle' | 'loadingProps'> {
type?: 'solid' | 'outline';
}
export declare const Chip: RneFunctionComponent<ChipProps>;

@ -0,0 +1,26 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { Button } from '../Button';
export const Chip = (_a) => {
var { titleStyle, buttonStyle, onPress } = _a, rest = __rest(_a, ["titleStyle", "buttonStyle", "onPress"]);
return (React.createElement(Button, Object.assign({ titleStyle: StyleSheet.flatten([
{ fontSize: 14, paddingHorizontal: 2 },
titleStyle,
]), radius: 30, buttonStyle: buttonStyle }, (onPress === undefined
? {
TouchableComponent: TouchableWithoutFeedback,
}
: { onPress }), rest)));
};
Chip.displayName = 'Chip';

@ -0,0 +1,3 @@
import { Chip, ChipProps } from './Chip';
export { Chip };
export type { ChipProps };

@ -0,0 +1,2 @@
import { Chip } from './Chip';
export { Chip };

@ -0,0 +1,6 @@
import { ReactNode } from 'react';
import { RneFunctionComponent } from '../helpers';
export interface DialogActionsProps {
children?: ReactNode;
}
export declare const DialogActions: RneFunctionComponent<DialogActionsProps>;

@ -0,0 +1,14 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
export const DialogActions = ({ children, }) => {
return (React.createElement(View, { style: styles.actionsView, testID: "Button__View" }, children));
};
const styles = StyleSheet.create({
actionsView: {
marginTop: 10,
flexDirection: 'row-reverse',
justifyContent: 'flex-start',
flexWrap: 'wrap',
},
});
DialogActions.displayName = 'Dialog.Actions';

@ -0,0 +1,5 @@
import { ButtonProps } from '../Button';
import { RneFunctionComponent } from '../helpers';
export interface DialogButtonProps extends ButtonProps {
}
export declare const DialogButton: RneFunctionComponent<DialogButtonProps>;

@ -0,0 +1,31 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet } from 'react-native';
import { Button } from '../Button';
export const DialogButton = (_a) => {
var { titleStyle } = _a, rest = __rest(_a, ["titleStyle"]);
return (React.createElement(Button, Object.assign({ style: { marginLeft: 5 }, titleStyle: StyleSheet.flatten([styles.buttonTitle, titleStyle]), containerStyle: {
width: 'auto',
}, testID: "Dialog__Button" }, rest)));
};
DialogButton.defaultProps = {
title: 'ACTION',
type: 'clear',
};
const styles = StyleSheet.create({
buttonTitle: {
fontSize: 15,
fontWeight: '500',
},
});
DialogButton.displayName = 'Dialog.Button';

@ -0,0 +1,7 @@
import { ViewStyle, ActivityIndicatorProps, StyleProp } from 'react-native';
import { RneFunctionComponent } from '../helpers';
export interface DialogLoadingProps {
loadingStyle?: StyleProp<ViewStyle>;
loadingProps?: ActivityIndicatorProps;
}
export declare const DialogLoading: RneFunctionComponent<DialogLoadingProps>;

@ -0,0 +1,22 @@
import React from 'react';
import { StyleSheet, ActivityIndicator, View, } from 'react-native';
import { defaultTheme } from '../helpers';
export const DialogLoading = ({ loadingStyle, loadingProps, theme = defaultTheme, }) => {
var _a, _b, _c;
return (React.createElement(View, { style: styles.loadingView },
React.createElement(ActivityIndicator, Object.assign({ style: StyleSheet.flatten([styles.loading, loadingStyle]), color: (_a = loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.color) !== null && _a !== void 0 ? _a : (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary, size: (_c = loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.size) !== null && _c !== void 0 ? _c : 'large', testID: "Dialog__Loading" }, loadingProps))));
};
DialogLoading.defaultProps = {
loadingProps: { size: 'large' },
};
const styles = StyleSheet.create({
loading: {
marginVertical: 20,
},
loadingView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});
DialogLoading.displayName = 'Dialog.Loading';

@ -0,0 +1,9 @@
import { TextStyle, StyleProp } from 'react-native';
import { RneFunctionComponent } from '../helpers';
import { TextProps } from '../Text';
export interface DialogTitleProps {
title?: string;
titleStyle?: StyleProp<TextStyle>;
titleProps?: TextProps;
}
export declare const DialogTitle: RneFunctionComponent<DialogTitleProps>;

@ -0,0 +1,13 @@
import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
export const DialogTitle = ({ title, titleStyle, titleProps, }) => {
return (React.createElement(Text, Object.assign({ style: StyleSheet.flatten([styles.title, titleStyle]), testID: "Dialog__Title" }, titleProps), title));
};
const styles = StyleSheet.create({
title: {
fontSize: 18,
fontWeight: Platform.OS === 'ios' ? '600' : '700',
marginBottom: 10,
},
});
DialogTitle.displayName = 'Dialog.Title';

@ -0,0 +1,9 @@
import { ReactNode } from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { OverlayProps } from '../Overlay';
import { RneFunctionComponent } from '../helpers';
export interface DialogProps extends Partial<Omit<OverlayProps, 'fullScreen'>> {
children?: ReactNode;
overlayStyle?: StyleProp<ViewStyle>;
}
export declare const DialogBase: RneFunctionComponent<DialogProps>;

@ -0,0 +1,31 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet } from 'react-native';
import { Overlay } from '../Overlay';
export const DialogBase = (_a) => {
var { children, overlayStyle, onBackdropPress, isVisible } = _a, rest = __rest(_a, ["children", "overlayStyle", "onBackdropPress", "isVisible"]);
return (React.createElement(Overlay, Object.assign({ isVisible: isVisible, onBackdropPress: onBackdropPress, overlayStyle: StyleSheet.flatten([styles.dialog, overlayStyle]), testID: "Internal__Overlay" }, rest), children));
};
const styles = StyleSheet.create({
dialog: {
width: '75%',
padding: 20,
},
buttonView: {
marginTop: 10,
marginRight: -35,
flexDirection: 'row-reverse',
justifyContent: 'flex-start',
},
});
DialogBase.displayName = 'Dialog';

@ -0,0 +1,12 @@
import { DialogLoadingProps } from './Dialog.Loading';
import { DialogTitleProps } from './Dialog.Title';
import { DialogButtonProps } from './Dialog.Button';
import { DialogActionsProps } from './Dialog.Actions';
import { DialogProps } from './Dialog';
export declare const Dialog: import("..").RneFunctionComponent<DialogProps> & {
Loading: import("..").RneFunctionComponent<DialogLoadingProps>;
Title: import("..").RneFunctionComponent<DialogTitleProps>;
Actions: import("..").RneFunctionComponent<DialogActionsProps>;
Button: import("..").RneFunctionComponent<DialogButtonProps>;
};
export type { DialogProps, DialogLoadingProps, DialogButtonProps, DialogTitleProps, DialogActionsProps, };

@ -0,0 +1,11 @@
import { DialogLoading } from './Dialog.Loading';
import { DialogTitle } from './Dialog.Title';
import { DialogButton } from './Dialog.Button';
import { DialogActions } from './Dialog.Actions';
import { DialogBase } from './Dialog';
export const Dialog = Object.assign(DialogBase, {
Loading: DialogLoading,
Title: DialogTitle,
Actions: DialogActions,
Button: DialogButton,
});

@ -0,0 +1,13 @@
import { ViewProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
import { RneFunctionComponent } from '../helpers';
export interface DividerProps extends ViewProps {
color?: string;
inset?: boolean;
insetType?: 'left' | 'right' | 'middle';
style?: StyleProp<ViewStyle>;
subHeader?: string;
subHeaderStyle?: StyleProp<TextStyle>;
orientation?: 'horizontal' | 'vertical';
width?: number;
}
export declare const Divider: RneFunctionComponent<DividerProps>;

@ -0,0 +1,65 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var _a, _b;
import React from 'react';
import { View, StyleSheet, Text, } from 'react-native';
import { defaultTheme } from '../helpers';
export const Divider = (_a) => {
var { color, inset = false, insetType = 'left', orientation = 'horizontal', style, subHeader, subHeaderStyle, width } = _a, rest = __rest(_a, ["color", "inset", "insetType", "orientation", "style", "subHeader", "subHeaderStyle", "width"]);
return (React.createElement(React.Fragment, null,
React.createElement(View, Object.assign({ testID: "RNE__Divider", style: StyleSheet.flatten([
styles.divider,
style,
inset &&
(insetType === 'left'
? styles.leftInset
: insetType === 'right'
? styles.rightInset
: Object.assign(Object.assign({}, styles.leftInset), styles.rightInset)),
orientation === 'vertical' && styles.vertical,
width &&
(orientation === 'horizontal'
? { borderBottomWidth: width }
: { borderRightWidth: width }),
color &&
(orientation === 'horizontal'
? { borderBottomColor: color }
: { borderRightColor: color }),
]) }, rest)),
subHeader && orientation === 'horizontal' ? (React.createElement(Text, { style: StyleSheet.flatten([
styles.subHeader,
subHeaderStyle,
inset && styles.leftInset,
]) }, subHeader)) : null));
};
const styles = StyleSheet.create({
divider: {
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: (_a = defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.colors) === null || _a === void 0 ? void 0 : _a.divider,
},
leftInset: {
marginLeft: 72,
},
rightInset: {
marginRight: 72,
},
vertical: {
borderRightWidth: StyleSheet.hairlineWidth,
borderRightColor: (_b = defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.colors) === null || _b === void 0 ? void 0 : _b.divider,
height: 'auto',
alignSelf: 'stretch',
},
subHeader: {
includeFontPadding: false,
},
});
Divider.displayName = 'Divider';

@ -0,0 +1,3 @@
import { Divider, DividerProps } from './Divider';
export { Divider };
export type { DividerProps };

@ -0,0 +1,2 @@
import { Divider } from './Divider';
export { Divider };

@ -0,0 +1,12 @@
import { StyleProp, ViewStyle } from 'react-native';
import { ButtonProps } from '../Button';
import { RneFunctionComponent } from '../helpers';
export interface FABProps extends Omit<ButtonProps, 'size' | 'color'> {
color?: string;
size?: 'large' | 'small';
placement?: 'left' | 'right';
visible?: boolean;
upperCase?: boolean;
style?: StyleProp<ViewStyle>;
}
export declare const FAB: RneFunctionComponent<FABProps>;

@ -0,0 +1,110 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet, Animated } from 'react-native';
import { Button } from '../Button';
import { defaultTheme } from '../helpers';
export const FAB = (_a) => {
var _b, _c;
var { color, size = 'large', visible = true, disabled, upperCase, theme = defaultTheme, style, titleStyle, buttonStyle, containerStyle, iconContainerStyle, placement } = _a, rest = __rest(_a, ["color", "size", "visible", "disabled", "upperCase", "theme", "style", "titleStyle", "buttonStyle", "containerStyle", "iconContainerStyle", "placement"]);
const { current: animation } = React.useRef(new Animated.Value(Number(visible)));
React.useEffect(() => {
Animated.timing(animation, {
toValue: Number(visible),
duration: 200,
useNativeDriver: true,
}).start();
}, [animation, visible]);
return (React.createElement(Animated.View, { style: StyleSheet.flatten([
{
opacity: animation,
transform: [{ scale: animation }],
},
styles.content,
placement && {
[placement]: 0,
position: 'absolute',
margin: 16,
bottom: 0,
},
style,
]) },
React.createElement(Button, Object.assign({ buttonStyle: StyleSheet.flatten([
rest.title
? size === 'small'
? styles.smallExtendedLabel
: styles.extendedLabel
: size === 'small'
? styles.smallFAB
: styles.largeFAB,
{
backgroundColor: color || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.secondary),
},
buttonStyle,
]), iconContainerStyle: [
rest.title
? {}
: size === 'small'
? styles.smallFAB
: styles.largeFAB,
iconContainerStyle,
], containerStyle: StyleSheet.flatten([
styles.container,
disabled && styles.disabled,
containerStyle,
]), titleStyle: [
styles.label,
{ color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.white },
upperCase && styles.upperCaseLabel,
titleStyle,
] }, rest, { disabled, theme }))));
};
const styles = StyleSheet.create({
container: {
elevation: 4,
borderRadius: 28,
},
largeFAB: {
height: 56,
width: 56,
padding: 16,
},
smallFAB: {
height: 40,
width: 40,
padding: 8,
},
content: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 28,
},
label: {
marginHorizontal: 8,
},
upperCaseLabel: {
textTransform: 'uppercase',
},
extendedLabel: {
height: 48,
paddingHorizontal: 16,
},
smallExtendedLabel: {
height: 40,
paddingHorizontal: 12,
},
disabled: {
elevation: 0,
},
});
FAB.displayName = 'FAB';

@ -0,0 +1,3 @@
import { FAB, FABProps } from './FAB';
export { FAB };
export type { FABProps };

@ -0,0 +1,2 @@
import { FAB } from './FAB';
export { FAB };

@ -0,0 +1,26 @@
import React from 'react';
import { StyleProp, TextProps, ViewProps, StatusBarProps, StatusBarStyle, ImageSourcePropType, ImageStyle, ViewStyle } from 'react-native';
import { RneFunctionComponent } from '../helpers';
import { HeaderIcon } from './components/HeaderIcon';
declare type HeaderSubComponent = React.ReactElement<{}> | TextProps | HeaderIcon;
export interface HeaderProps extends ViewProps {
ViewComponent?: typeof React.Component;
linearGradientProps?: Object;
statusBarProps?: StatusBarProps;
barStyle?: StatusBarStyle;
leftComponent?: HeaderSubComponent;
centerComponent?: HeaderSubComponent;
rightComponent?: HeaderSubComponent;
backgroundColor?: string;
backgroundImage?: ImageSourcePropType;
backgroundImageStyle?: ImageStyle;
placement?: 'left' | 'center' | 'right';
containerStyle?: StyleProp<ViewStyle>;
centerContainerStyle?: StyleProp<ViewStyle>;
leftContainerStyle?: StyleProp<ViewStyle>;
rightContainerStyle?: StyleProp<ViewStyle>;
children?: JSX.Element | JSX.Element[];
elevated?: boolean;
}
export declare const Header: RneFunctionComponent<HeaderProps>;
export {};

@ -0,0 +1,88 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Platform, StatusBar, StyleSheet, View, ImageBackground, } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { defaultTheme } from '../helpers';
import { Children } from './components/HeaderChildren';
export const Header = (_a) => {
var _b, _c;
var { statusBarProps, leftComponent, centerComponent, rightComponent, leftContainerStyle, centerContainerStyle, rightContainerStyle, backgroundColor, backgroundImage, backgroundImageStyle, containerStyle, placement = 'center', barStyle, children = [], linearGradientProps, ViewComponent = linearGradientProps || !backgroundImage
? View
: ImageBackground, theme = defaultTheme, elevated } = _a, rest = __rest(_a, ["statusBarProps", "leftComponent", "centerComponent", "rightComponent", "leftContainerStyle", "centerContainerStyle", "rightContainerStyle", "backgroundColor", "backgroundImage", "backgroundImageStyle", "containerStyle", "placement", "barStyle", "children", "linearGradientProps", "ViewComponent", "theme", "elevated"]);
React.useEffect(() => {
if (linearGradientProps && !ViewComponent) {
console.warn("You need to pass a ViewComponent to use linearGradientProps !\nExample: ViewComponent={require('react-native-linear-gradient')}");
}
});
return (React.createElement(React.Fragment, null,
React.createElement(StatusBar, Object.assign({ barStyle: barStyle, translucent: true, backgroundColor: backgroundColor || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) }, statusBarProps)),
React.createElement(ViewComponent, Object.assign({ testID: "headerContainer" }, rest, { style: StyleSheet.flatten([
{
borderBottomColor: '#f2f2f2',
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 10,
paddingVertical: 10,
backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
backgroundColor && { backgroundColor },
elevated && styles.elevatedHeader,
containerStyle,
]), source: backgroundImage, imageStyle: backgroundImageStyle }, linearGradientProps),
React.createElement(SafeAreaView, { edges: ['left', 'top', 'right'], style: styles.headerSafeView },
React.createElement(Children, { style: StyleSheet.flatten([
placement === 'center' && styles.rightLeftContainer,
leftContainerStyle,
]), placement: "left" }, (React.isValidElement(children) && children) ||
children[0] ||
leftComponent),
React.createElement(Children, { style: StyleSheet.flatten([
styles.centerContainer,
placement !== 'center' && {
paddingHorizontal: Platform.select({
android: 16,
default: 15,
}),
},
centerContainerStyle,
]), placement: placement }, children[1] || centerComponent),
React.createElement(Children, { style: StyleSheet.flatten([
placement === 'center' && styles.rightLeftContainer,
rightContainerStyle,
]), placement: "right" }, children[2] || rightComponent)))));
};
const styles = StyleSheet.create({
headerSafeView: {
width: '100%',
flexDirection: 'row',
},
centerContainer: {
flex: 3,
},
rightLeftContainer: {
flex: 1,
},
elevatedHeader: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.6,
shadowRadius: 8.0,
elevation: 24,
},
});
Header.displayName = 'Header';

@ -0,0 +1,10 @@
/// <reference types="react" />
import { StyleProp, ViewStyle } from 'react-native';
declare type Placement = 'left' | 'center' | 'right';
export interface HeaderChildrenProps {
placement: Placement;
style: StyleProp<ViewStyle>;
children: any;
}
export declare const Children: ({ style, placement, children, }: HeaderChildrenProps) => JSX.Element;
export {};

@ -0,0 +1,19 @@
import React from 'react';
import { View, StyleSheet, Text, } from 'react-native';
import { renderNode } from '../../helpers';
import { Icon } from '../../Icon';
const ALIGN_STYLE = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
};
export const Children = ({ style, placement, children, }) => (React.createElement(View, { style: StyleSheet.flatten([{ alignItems: ALIGN_STYLE[placement] }, style]) }, children == null || children === false
? null
: children.text
? renderNode(Text, children.text, Object.assign({ numberOfLines: 1 }, children))
: children.icon
? renderNode(Icon, Object.assign(Object.assign({}, children), { name: children.icon, containerStyle: StyleSheet.flatten([
{ alignItems: ALIGN_STYLE[placement] },
children.containerStyle,
]) }))
: renderNode(Text, children)));

@ -0,0 +1,8 @@
import { IconObject } from '../../Icon';
import { StyleProp, TextStyle } from 'react-native';
export interface HeaderIcon extends IconObject {
icon?: string;
text?: string;
color?: string;
style?: StyleProp<TextStyle>;
}

@ -0,0 +1,3 @@
import { Header, HeaderProps } from './Header';
export { Header };
export type { HeaderProps };

@ -0,0 +1,2 @@
import { Header } from './Header';
export { Header };

@ -0,0 +1,27 @@
import React from 'react';
import { ViewStyle, StyleProp, TextStyle } from 'react-native';
import { IconButtonProps, IconProps as VectorIconProps } from 'react-native-vector-icons/Icon';
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
export declare type IconType = 'material' | 'material-community' | 'simple-line-icon' | 'zocial' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'entypo' | 'antdesign' | 'font-awesome-5' | string;
export interface IconObject {
name?: string;
color?: string;
size?: number;
type?: IconType;
iconStyle?: StyleProp<TextStyle>;
}
export declare type IconNode = boolean | React.ReactElement<{}> | Partial<IconProps>;
export interface IconProps extends InlinePressableProps, IconButtonProps {
type?: IconType;
Component?: typeof React.Component;
reverse?: boolean;
raised?: boolean;
containerStyle?: StyleProp<ViewStyle>;
iconProps?: VectorIconProps;
reverseColor?: string;
disabled?: boolean;
disabledStyle?: StyleProp<ViewStyle>;
solid?: boolean;
brand?: boolean;
}
export declare const Icon: RneFunctionComponent<IconProps>;

@ -0,0 +1,96 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Platform, View, StyleSheet, Pressable, } from 'react-native';
import Color from 'color';
import getIconType from '../helpers/getIconType';
import getIconStyle from '../helpers/getIconStyle';
import { androidRipple, defaultTheme, } from '../helpers';
export const Icon = (_a) => {
var _b, _c, _d;
var { type = 'material', name, size = 24, color: colorProp, iconStyle, iconProps, underlayColor = 'transparent', reverse = false, raised = false, containerStyle, reverseColor: reverseColorProp, disabled = false, disabledStyle, onPress, onLongPress, onPressIn, onPressOut, Component = onPress || onLongPress || onPressIn || onPressOut
? Pressable
: View, solid = false, brand = false, theme = defaultTheme, pressableProps } = _a, rest = __rest(_a, ["type", "name", "size", "color", "iconStyle", "iconProps", "underlayColor", "reverse", "raised", "containerStyle", "reverseColor", "disabled", "disabledStyle", "onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "solid", "brand", "theme", "pressableProps"]);
const color = colorProp || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black);
const reverseColor = reverseColorProp || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.white);
const IconComponent = getIconType(type);
const iconSpecificStyle = getIconStyle(type, { solid, brand });
const getBackgroundColor = React.useMemo(() => {
var _a;
if (reverse) {
return color;
}
return raised ? (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white : 'transparent';
}, [color, raised, reverse, (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.white]);
const buttonStyles = React.useMemo(() => ({
borderRadius: size + 4,
height: size * 2 + 4,
width: size * 2 + 4,
}), [size]);
return (React.createElement(View, { style: StyleSheet.flatten([
!raised && styles.container,
(reverse || raised) && styles.button,
(reverse || raised) && buttonStyles,
raised && styles.raised,
iconStyle && iconStyle.borderRadius
? {
borderRadius: iconStyle.borderRadius,
}
: {},
containerStyle && containerStyle,
]), testID: "RNE__ICON__CONTAINER" },
React.createElement(Component, Object.assign({ testID: "RNE__ICON__CONTAINER_ACTION" }, Object.assign(Object.assign({ android_ripple: androidRipple(Color(reverse ? color : underlayColor)
.alpha(0.3)
.rgb()
.string()), onPress,
onLongPress,
onPressIn,
onPressOut,
disabled, accessibilityRole: 'button' }, pressableProps), rest)),
React.createElement(View, { style: StyleSheet.flatten([
(reverse || raised) && buttonStyles,
{
backgroundColor: getBackgroundColor,
alignItems: 'center',
justifyContent: 'center',
},
disabled && styles.disabled,
disabled && disabledStyle,
]), testID: "RNE__ICON" },
React.createElement(IconComponent, Object.assign({ testID: "RNE__ICON__Component", style: StyleSheet.flatten([
{ backgroundColor: 'transparent' },
iconStyle && iconStyle,
]), size: size, name: name, color: reverse ? reverseColor : color }, iconSpecificStyle, iconProps))))));
};
const styles = StyleSheet.create({
container: {
overflow: 'hidden',
},
button: {
margin: 7,
},
raised: Object.assign({}, Platform.select({
android: {
elevation: 2,
},
default: {
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
},
})),
disabled: {
backgroundColor: '#D1D5D8',
},
});
Icon.displayName = 'Icon';

@ -0,0 +1,3 @@
import { Icon, IconProps, IconNode, IconObject, IconType } from './Icon';
export { Icon };
export type { IconProps, IconNode, IconObject, IconType };

@ -0,0 +1,2 @@
import { Icon } from './Icon';
export { Icon };

@ -0,0 +1,14 @@
import React from 'react';
import { ImageProps as RNImageProps, StyleProp, ViewStyle } from 'react-native';
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
export interface ImageProps extends RNImageProps, InlinePressableProps {
Component?: typeof React.Component;
ImageComponent?: typeof React.Component;
PlaceholderContent?: React.ReactElement;
containerStyle?: StyleProp<ViewStyle>;
childrenContainerStyle?: StyleProp<ViewStyle>;
placeholderStyle?: StyleProp<ViewStyle>;
transition?: boolean;
transitionDuration?: number;
}
export declare const Image: RneFunctionComponent<ImageProps>;

@ -0,0 +1,62 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useCallback } from 'react';
import { Animated, Image as ImageNative, StyleSheet, View, Pressable, Text, } from 'react-native';
export const Image = (_a) => {
var { onPress, onLongPress, onPressIn, onPressOut, Component = onPress || onLongPress || onPressIn || onPressOut
? Pressable
: View, placeholderStyle, PlaceholderContent, containerStyle, childrenContainerStyle = null, style = {}, ImageComponent = ImageNative, onLoad, children, transition, transitionDuration = 360, pressableProps } = _a, props = __rest(_a, ["onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "placeholderStyle", "PlaceholderContent", "containerStyle", "childrenContainerStyle", "style", "ImageComponent", "onLoad", "children", "transition", "transitionDuration", "pressableProps"]);
const placeholderOpacity = React.useRef(new Animated.Value(1));
const onLoadHandler = useCallback((event) => {
if (transition) {
Animated.timing(placeholderOpacity.current, {
toValue: 0,
duration: transitionDuration,
useNativeDriver: true,
}).start();
}
else {
placeholderOpacity.current.setValue(0);
}
onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
}, [transition, transitionDuration, onLoad]);
const hasImage = Boolean(props.source);
return (React.createElement(Component, Object.assign({}, pressableProps, { onPress, onPressIn, onPressOut, onLongPress }, { accessibilityIgnoresInvertColors: true, style: StyleSheet.flatten([styles.container, containerStyle]) }),
React.createElement(ImageComponent, Object.assign({ testID: "RNE__Image" }, props, { transition, transitionDuration }, { onLoad: onLoadHandler, style: StyleSheet.flatten([StyleSheet.absoluteFill, style]) })),
React.createElement(Animated.View, { pointerEvents: hasImage ? 'none' : 'auto', accessibilityElementsHidden: hasImage, importantForAccessibility: hasImage ? 'no-hide-descendants' : 'yes', style: [
StyleSheet.absoluteFillObject,
{
opacity: hasImage ? placeholderOpacity.current : 1,
},
] },
React.createElement(View, { testID: "RNE__Image__placeholder", style: StyleSheet.flatten([
style,
styles.placeholder,
placeholderStyle,
]) }, React.isValidElement(PlaceholderContent)
? PlaceholderContent
: PlaceholderContent && (React.createElement(Text, { testID: "RNE__Image__Placeholder__Content" }, PlaceholderContent)))),
React.createElement(View, { testID: "RNE__Image__children__container", style: childrenContainerStyle !== null && childrenContainerStyle !== void 0 ? childrenContainerStyle : style }, children)));
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
position: 'relative',
overflow: 'hidden',
},
placeholder: {
backgroundColor: '#bdbdbd',
alignItems: 'center',
justifyContent: 'center',
},
});
Image.displayName = 'Image';

@ -0,0 +1,12 @@
import { Image as ImageNative } from 'react-native';
import { ImageProps } from './Image';
declare const Image: import("..").RneFunctionComponent<ImageProps> & {
getSize: typeof ImageNative.getSize;
getSizeWithHeaders: typeof ImageNative.getSizeWithHeaders;
prefetch: typeof ImageNative.prefetch;
abortPrefetch: typeof ImageNative.abortPrefetch;
queryCache: typeof ImageNative.queryCache;
resolveAssetSource: typeof ImageNative.resolveAssetSource;
};
export { Image };
export type { ImageProps };

@ -0,0 +1,11 @@
import { Image as ImageNative } from 'react-native';
import { Image as RNEImage } from './Image';
const Image = Object.assign(RNEImage, {
getSize: ImageNative.getSize,
getSizeWithHeaders: ImageNative.getSizeWithHeaders,
prefetch: ImageNative.prefetch,
abortPrefetch: ImageNative.abortPrefetch,
queryCache: ImageNative.queryCache,
resolveAssetSource: ImageNative.resolveAssetSource,
});
export { Image };

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save