);
};
export default App;
================================================
FILE: RNBareExample/_editorconfig
================================================
# Windows files
[*.bat]
end_of_line = crlf
================================================
FILE: RNBareExample/android/app/_BUCK
================================================
# To learn about Buck see [Docs](https://buckbuild.com/).
# To run your application with Buck:
# - install Buck
# - `npm start` - to start the packager
# - `cd android`
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
# - `buck install -r android/app` - compile, install and run application
#
load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
lib_deps = []
create_aar_targets(glob(["libs/*.aar"]))
create_jar_targets(glob(["libs/*.jar"]))
android_library(
name = "all-libs",
exported_deps = lib_deps,
)
android_library(
name = "app-code",
srcs = glob([
"src/main/java/**/*.java",
]),
deps = [
":all-libs",
":build_config",
":res",
],
)
android_build_config(
name = "build_config",
package = "com.rnbareexample",
)
android_resource(
name = "res",
package = "com.rnbareexample",
res = "src/main/res",
)
android_binary(
name = "app",
keystore = "//android/keystores:debug",
manifest = "src/main/AndroidManifest.xml",
package_type = "debug",
deps = [
":app-code",
],
)
================================================
FILE: RNBareExample/android/app/build.gradle
================================================
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation. If none specified and
* // "index.android.js" exists, it will be used. Otherwise "index.js" is
* // default. Can be overridden with ENTRY_FILE environment variable.
* entryFile: "index.android.js",
*
* // https://reactnative.dev/docs/performance#enable-the-ram-format
* bundleCommand: "ram-bundle",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn${productFlavor}${buildType}'
* // 'bundleIn${buildType}'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // 'devDisabledIn${productFlavor}${buildType}'
* // 'devDisabledIn${buildType}'
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
enableHermes: false, // clean and rebuild if changing
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
/**
* The preferred build flavor of JavaScriptCore.
*
* For example, to use the international variant, you can use:
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
*
* The international variant includes ICU i18n library and necessary data
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
* give correct results when using with locales other than en-US. Note that
* this variant is about 6MiB larger per architecture than default.
*/
def jscFlavor = 'org.webkit:android-jsc:+'
/**
* Whether to enable the Hermes VM.
*
* This should be set on project.ext.react and mirrored here. If it is not set
* on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
* and the benefits of using Hermes will therefore be sharply reduced.
*/
def enableHermes = project.ext.react.get("enableHermes", false);
android {
ndkVersion rootProject.ext.ndkVersion
compileSdkVersion rootProject.ext.compileSdkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
defaultConfig {
applicationId "com.rnbareexample"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
}
}
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.debug
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
}
}
}
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
exclude group:'com.squareup.okhttp3', module:'okhttp'
}
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
}
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
================================================
FILE: RNBareExample/android/app/build_defs.bzl
================================================
"""Helper definitions to glob .aar and .jar targets"""
def create_aar_targets(aarfiles):
for aarfile in aarfiles:
name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
lib_deps.append(":" + name)
android_prebuilt_aar(
name = name,
aar = aarfile,
)
def create_jar_targets(jarfiles):
for jarfile in jarfiles:
name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
lib_deps.append(":" + name)
prebuilt_jar(
name = name,
binary_jar = jarfile,
)
================================================
FILE: RNBareExample/android/app/proguard-rules.pro
================================================
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# Add any project specific keep options here:
================================================
FILE: RNBareExample/android/app/src/debug/AndroidManifest.xml
================================================
================================================
FILE: RNBareExample/android/app/src/debug/java/com/rnbareexample/ReactNativeFlipper.java
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
*
This source code is licensed under the MIT license found in the LICENSE file in the root
* directory of this source tree.
*/
package com.rnbareexample;
import android.content.Context;
import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.android.utils.FlipperUtils;
import com.facebook.flipper.core.FlipperClient;
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;
public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
final FlipperClient client = AndroidFlipperClient.getInstance(context);
client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
client.addPlugin(new ReactFlipperPlugin());
client.addPlugin(new DatabasesFlipperPlugin(context));
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
client.addPlugin(CrashReporterPlugin.getInstance());
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
NetworkingModule.setCustomClientBuilder(
new NetworkingModule.CustomClientBuilder() {
@Override
public void apply(OkHttpClient.Builder builder) {
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});
client.addPlugin(networkFlipperPlugin);
client.start();
// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
// Hence we run if after all native modules have been initialized
ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
if (reactContext == null) {
reactInstanceManager.addReactInstanceEventListener(
new ReactInstanceManager.ReactInstanceEventListener() {
@Override
public void onReactContextInitialized(ReactContext reactContext) {
reactInstanceManager.removeReactInstanceEventListener(this);
reactContext.runOnNativeModulesQueueThread(
new Runnable() {
@Override
public void run() {
client.addPlugin(new FrescoFlipperPlugin());
}
});
}
});
} else {
client.addPlugin(new FrescoFlipperPlugin());
}
}
}
}
================================================
FILE: RNBareExample/android/app/src/main/AndroidManifest.xml
================================================
================================================
FILE: RNBareExample/android/app/src/main/java/com/rnbareexample/MainActivity.java
================================================
package com.rnbareexample;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "RNBareExample";
}
}
================================================
FILE: RNBareExample/android/app/src/main/java/com/rnbareexample/MainApplication.java
================================================
package com.rnbareexample;
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.BV.LinearGradient.LinearGradientPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}
/**
* Loads Flipper in React Native templates. Call this in the onCreate method with something like
* initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
*
* @param context
* @param reactInstanceManager
*/
private static void initializeFlipper(
Context context, ReactInstanceManager reactInstanceManager) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class aClass = Class.forName("com.rnbareexample.ReactNativeFlipper");
aClass
.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
.invoke(null, context, reactInstanceManager);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
================================================
FILE: RNBareExample/android/app/src/main/res/values/strings.xml
================================================
RNBareExample
================================================
FILE: RNBareExample/android/app/src/main/res/values/styles.xml
================================================
================================================
FILE: RNBareExample/android/build.gradle
================================================
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "29.0.3"
minSdkVersion = 21
compileSdkVersion = 29
targetSdkVersion = 29
ndkVersion = "20.1.5948944"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:4.1.0")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://www.jitpack.io' }
}
}
================================================
FILE: RNBareExample/android/gradle/wrapper/gradle-wrapper.properties
================================================
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
================================================
FILE: RNBareExample/android/gradle.properties
================================================
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx10248m -XX:MaxPermSize=256m
# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true
# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.75.1
================================================
FILE: RNBareExample/android/gradlew
================================================
#!/usr/bin/env sh
#
# Copyright 2015 the original author or authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
##############################################################################
##
## Gradle start up script for UN*X
##
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
PRG="$0"
# Need this for relative symlinks.
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> \(.*\)$'`
if expr "$link" : '/.*' > /dev/null; then
PRG="$link"
else
PRG=`dirname "$PRG"`"/$link"
fi
done
SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`"
cd "$SAVED" >/dev/null
APP_NAME="Gradle"
APP_BASE_NAME=`basename "$0"`
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD="maximum"
warn () {
echo "$*"
}
die () {
echo
echo "$*"
echo
exit 1
}
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "`uname`" in
CYGWIN* )
cygwin=true
;;
Darwin* )
darwin=true
;;
MINGW* )
msys=true
;;
NONSTOP* )
nonstop=true
;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD="$JAVA_HOME/jre/sh/java"
else
JAVACMD="$JAVA_HOME/bin/java"
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
MAX_FD_LIMIT=`ulimit -H -n`
if [ $? -eq 0 ] ; then
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
MAX_FD="$MAX_FD_LIMIT"
fi
ulimit -n $MAX_FD
if [ $? -ne 0 ] ; then
warn "Could not set maximum file descriptor limit: $MAX_FD"
fi
else
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
fi
fi
# For Darwin, add options to specify how the application appears in the dock
if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi
# For Cygwin or MSYS, switch paths to Windows format before running java
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
SEP=""
for dir in $ROOTDIRSRAW ; do
ROOTDIRS="$ROOTDIRS$SEP$dir"
SEP="|"
done
OURCYGPATTERN="(^($ROOTDIRS))"
# Add a user-defined pattern to the cygpath arguments
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
fi
# Now convert the arguments - kludge to limit ourselves to /bin/sh
i=0
for arg in "$@" ; do
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
else
eval `echo args$i`="\"$arg\""
fi
i=`expr $i + 1`
done
case $i in
0) set -- ;;
1) set -- "$args0" ;;
2) set -- "$args0" "$args1" ;;
3) set -- "$args0" "$args1" "$args2" ;;
4) set -- "$args0" "$args1" "$args2" "$args3" ;;
5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
esac
fi
# Escape application args
save () {
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
echo " "
}
APP_ARGS=`save "$@"`
# Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
exec "$JAVACMD" "$@"
================================================
FILE: RNBareExample/android/gradlew.bat
================================================
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto execute
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega
================================================
FILE: RNBareExample/android/settings.gradle
================================================
rootProject.name = 'RNBareExample'
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
================================================
FILE: RNBareExample/app.json
================================================
{
"name": "RNBareExample",
"displayName": "RNBareExample"
}
================================================
FILE: RNBareExample/babel.config.js
================================================
const path = require('path');
const pak = require('../package.json');
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
alias: {
// For development, we want to alias the library to the source
[pak.name]: path.join(__dirname, '..', pak.source),
},
},
],
],
};
};
================================================
FILE: RNBareExample/index.js
================================================
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
================================================
FILE: RNBareExample/ios/Podfile
================================================
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '10.0'
target 'RNBareExample' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
target 'RNBareExampleTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
end
end
================================================
FILE: RNBareExample/ios/RNBareExample/AppDelegate.h
================================================
#import
#import
@interface AppDelegate : UIResponder
@property (nonatomic, strong) UIWindow *window;
@end
================================================
FILE: RNBareExample/ios/RNBareExample/AppDelegate.m
================================================
#import "AppDelegate.h"
#import
#import
#import
#ifdef FB_SONARKIT_ENABLED
#import
#import
#import
#import
#import
#import
static void InitializeFlipper(UIApplication *application) {
FlipperClient *client = [FlipperClient sharedClient];
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
[client addPlugin:[FlipperKitReactPlugin new]];
[client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
[client start];
}
#endif
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
InitializeFlipper(application);
#endif
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"RNBareExample"
initialProperties:nil];
if (@available(iOS 13.0, *)) {
rootView.backgroundColor = [UIColor systemBackgroundColor];
} else {
rootView.backgroundColor = [UIColor whiteColor];
}
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end
================================================
FILE: RNBareExample/ios/RNBareExample/Images.xcassets/AppIcon.appiconset/Contents.json
================================================
{
"images" : [
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
================================================
FILE: RNBareExample/ios/RNBareExample/Images.xcassets/Contents.json
================================================
{
"info" : {
"version" : 1,
"author" : "xcode"
}
}
================================================
FILE: RNBareExample/ios/RNBareExample/Info.plist
================================================
CFBundleDevelopmentRegionenCFBundleDisplayNameRNBareExampleCFBundleExecutable$(EXECUTABLE_NAME)CFBundleIdentifier$(PRODUCT_BUNDLE_IDENTIFIER)CFBundleInfoDictionaryVersion6.0CFBundleName$(PRODUCT_NAME)CFBundlePackageTypeAPPLCFBundleShortVersionString1.0CFBundleSignature????CFBundleVersion1LSRequiresIPhoneOSNSAppTransportSecurityNSExceptionDomainslocalhostNSExceptionAllowsInsecureHTTPLoadsNSLocationWhenInUseUsageDescriptionUILaunchStoryboardNameLaunchScreenUIRequiredDeviceCapabilitiesarmv7UISupportedInterfaceOrientationsUIInterfaceOrientationPortraitUIInterfaceOrientationLandscapeLeftUIInterfaceOrientationLandscapeRightUIViewControllerBasedStatusBarAppearanceUIAppFontsRoboto-Bold.ttfRoboto-Italic.ttfRoboto-Light.ttfRoboto-Medium.ttfRoboto-Regular.ttfMerriweather-Regular.ttf
================================================
FILE: RNBareExample/ios/RNBareExample/LaunchScreen.storyboard
================================================
================================================
FILE: RNBareExample/ios/RNBareExample/main.m
================================================
#import
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}
================================================
FILE: RNBareExample/ios/RNBareExample.xcodeproj/project.pbxproj
================================================
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 54;
objects = {
/* Begin PBXBuildFile section */
00E356F31AD99517003FC87E /* RNBareExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* RNBareExampleTests.m */; };
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
38BE891D962D4F349AF2917E /* Roboto-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D54F1726BC514FD686C64532 /* Roboto-Regular.ttf */; };
4664335C02E54CEEA39B7112 /* Merriweather-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4509DF3E719D42139C6957FB /* Merriweather-Regular.ttf */; };
4A2BEF80E0F0453CB2500790 /* Roboto-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3E1CF7D40B1D414988D3CC15 /* Roboto-Medium.ttf */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
8EC97A0012A44B37A239430B /* Roboto-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EE3CE23D43B345559A3E9B05 /* Roboto-Bold.ttf */; };
A407EFB79BE54725A37F6732 /* Roboto-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3DF03166C76248F88B6F59F2 /* Roboto-Italic.ttf */; };
CC958B3576C25F72C64CD117 /* libPods-RNBareExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 11C0BDDBE1B1045431ABC4E5 /* libPods-RNBareExample.a */; };
DE9675BE0B1F7B1E29B249D0 /* libPods-RNBareExample-RNBareExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 41168D7081D471981F679225 /* libPods-RNBareExample-RNBareExampleTests.a */; };
F8E98893793F4862BBC06E24 /* Roboto-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7BA646F9875F4FCEBAB2D80B /* Roboto-Light.ttf */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
proxyType = 1;
remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
remoteInfo = RNBareExample;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
00E356EE1AD99517003FC87E /* RNBareExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = RNBareExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; };
00E356F21AD99517003FC87E /* RNBareExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNBareExampleTests.m; sourceTree = ""; };
11C0BDDBE1B1045431ABC4E5 /* libPods-RNBareExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-RNBareExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
13B07F961A680F5B00A75B9A /* RNBareExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = RNBareExample.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = RNBareExample/AppDelegate.h; sourceTree = ""; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = RNBareExample/AppDelegate.m; sourceTree = ""; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = RNBareExample/Images.xcassets; sourceTree = ""; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RNBareExample/Info.plist; sourceTree = ""; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RNBareExample/main.m; sourceTree = ""; };
3DF03166C76248F88B6F59F2 /* Roboto-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Italic.ttf"; path = "../assets/fonts/Roboto-Italic.ttf"; sourceTree = ""; };
3E1CF7D40B1D414988D3CC15 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Medium.ttf"; path = "../assets/fonts/Roboto-Medium.ttf"; sourceTree = ""; };
41168D7081D471981F679225 /* libPods-RNBareExample-RNBareExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-RNBareExample-RNBareExampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
4509DF3E719D42139C6957FB /* Merriweather-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Merriweather-Regular.ttf"; path = "../assets/fonts/Merriweather-Regular.ttf"; sourceTree = ""; };
48A3F3B34B71A627C36D23AE /* Pods-RNBareExample-RNBareExampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNBareExample-RNBareExampleTests.debug.xcconfig"; path = "Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests.debug.xcconfig"; sourceTree = ""; };
6C3E26B903A9FBC8FEAD0366 /* Pods-RNBareExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNBareExample.release.xcconfig"; path = "Target Support Files/Pods-RNBareExample/Pods-RNBareExample.release.xcconfig"; sourceTree = ""; };
7BA646F9875F4FCEBAB2D80B /* Roboto-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Light.ttf"; path = "../assets/fonts/Roboto-Light.ttf"; sourceTree = ""; };
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = RNBareExample/LaunchScreen.storyboard; sourceTree = ""; };
BE9748D91138D25975CC7644 /* Pods-RNBareExample-RNBareExampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNBareExample-RNBareExampleTests.release.xcconfig"; path = "Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests.release.xcconfig"; sourceTree = ""; };
D54F1726BC514FD686C64532 /* Roboto-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Regular.ttf"; path = "../assets/fonts/Roboto-Regular.ttf"; sourceTree = ""; };
DC9506A1E7FC0D9474DB233B /* Pods-RNBareExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNBareExample.debug.xcconfig"; path = "Target Support Files/Pods-RNBareExample/Pods-RNBareExample.debug.xcconfig"; sourceTree = ""; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
EE3CE23D43B345559A3E9B05 /* Roboto-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Bold.ttf"; path = "../assets/fonts/Roboto-Bold.ttf"; sourceTree = ""; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
00E356EB1AD99517003FC87E /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
DE9675BE0B1F7B1E29B249D0 /* libPods-RNBareExample-RNBareExampleTests.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
CC958B3576C25F72C64CD117 /* libPods-RNBareExample.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
00E356EF1AD99517003FC87E /* RNBareExampleTests */ = {
isa = PBXGroup;
children = (
00E356F21AD99517003FC87E /* RNBareExampleTests.m */,
00E356F01AD99517003FC87E /* Supporting Files */,
);
path = RNBareExampleTests;
sourceTree = "";
};
00E356F01AD99517003FC87E /* Supporting Files */ = {
isa = PBXGroup;
children = (
00E356F11AD99517003FC87E /* Info.plist */,
);
name = "Supporting Files";
sourceTree = "";
};
13B07FAE1A68108700A75B9A /* RNBareExample */ = {
isa = PBXGroup;
children = (
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
13B07FB71A68108700A75B9A /* main.m */,
);
name = RNBareExample;
sourceTree = "";
};
159055EDF32C537E1DD2EA56 /* Pods */ = {
isa = PBXGroup;
children = (
DC9506A1E7FC0D9474DB233B /* Pods-RNBareExample.debug.xcconfig */,
6C3E26B903A9FBC8FEAD0366 /* Pods-RNBareExample.release.xcconfig */,
48A3F3B34B71A627C36D23AE /* Pods-RNBareExample-RNBareExampleTests.debug.xcconfig */,
BE9748D91138D25975CC7644 /* Pods-RNBareExample-RNBareExampleTests.release.xcconfig */,
);
name = Pods;
path = Pods;
sourceTree = "";
};
2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
isa = PBXGroup;
children = (
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
11C0BDDBE1B1045431ABC4E5 /* libPods-RNBareExample.a */,
41168D7081D471981F679225 /* libPods-RNBareExample-RNBareExampleTests.a */,
);
name = Frameworks;
sourceTree = "";
};
42CCD72C7CF4497793037815 /* Resources */ = {
isa = PBXGroup;
children = (
EE3CE23D43B345559A3E9B05 /* Roboto-Bold.ttf */,
3DF03166C76248F88B6F59F2 /* Roboto-Italic.ttf */,
7BA646F9875F4FCEBAB2D80B /* Roboto-Light.ttf */,
3E1CF7D40B1D414988D3CC15 /* Roboto-Medium.ttf */,
D54F1726BC514FD686C64532 /* Roboto-Regular.ttf */,
4509DF3E719D42139C6957FB /* Merriweather-Regular.ttf */,
);
name = Resources;
path = "";
sourceTree = "";
};
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
isa = PBXGroup;
children = (
);
name = Libraries;
sourceTree = "";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
13B07FAE1A68108700A75B9A /* RNBareExample */,
832341AE1AAA6A7D00B99B32 /* Libraries */,
00E356EF1AD99517003FC87E /* RNBareExampleTests */,
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
159055EDF32C537E1DD2EA56 /* Pods */,
42CCD72C7CF4497793037815 /* Resources */,
);
indentWidth = 2;
sourceTree = "";
tabWidth = 2;
usesTabs = 0;
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* RNBareExample.app */,
00E356EE1AD99517003FC87E /* RNBareExampleTests.xctest */,
);
name = Products;
sourceTree = "";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
00E356ED1AD99517003FC87E /* RNBareExampleTests */ = {
isa = PBXNativeTarget;
buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "RNBareExampleTests" */;
buildPhases = (
1E250219C895BEA3A3B522F8 /* [CP] Check Pods Manifest.lock */,
00E356EA1AD99517003FC87E /* Sources */,
00E356EB1AD99517003FC87E /* Frameworks */,
00E356EC1AD99517003FC87E /* Resources */,
80A9B916640DA44574A6BFE9 /* [CP] Embed Pods Frameworks */,
4064C66412A1431AEB98707F /* [CP] Copy Pods Resources */,
);
buildRules = (
);
dependencies = (
00E356F51AD99517003FC87E /* PBXTargetDependency */,
);
name = RNBareExampleTests;
productName = RNBareExampleTests;
productReference = 00E356EE1AD99517003FC87E /* RNBareExampleTests.xctest */;
productType = "com.apple.product-type.bundle.unit-test";
};
13B07F861A680F5B00A75B9A /* RNBareExample */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "RNBareExample" */;
buildPhases = (
817A1C3BBB37E467A160595B /* [CP] Check Pods Manifest.lock */,
FD10A7F022414F080027D42C /* Start Packager */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
3461A323C30894E61CCBE9AB /* [CP] Embed Pods Frameworks */,
5025BCA1300C603C2631117B /* [CP] Copy Pods Resources */,
);
buildRules = (
);
dependencies = (
);
name = RNBareExample;
productName = RNBareExample;
productReference = 13B07F961A680F5B00A75B9A /* RNBareExample.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 1210;
TargetAttributes = {
00E356ED1AD99517003FC87E = {
CreatedOnToolsVersion = 6.2;
TestTargetID = 13B07F861A680F5B00A75B9A;
};
13B07F861A680F5B00A75B9A = {
LastSwiftMigration = 1120;
};
};
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "RNBareExample" */;
compatibilityVersion = "Xcode 12.0";
developmentRegion = en;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* RNBareExample */,
00E356ED1AD99517003FC87E /* RNBareExampleTests */,
);
};
/* End PBXProject section */
/* Begin PBXResourcesBuildPhase section */
00E356EC1AD99517003FC87E /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
8EC97A0012A44B37A239430B /* Roboto-Bold.ttf in Resources */,
A407EFB79BE54725A37F6732 /* Roboto-Italic.ttf in Resources */,
F8E98893793F4862BBC06E24 /* Roboto-Light.ttf in Resources */,
4A2BEF80E0F0453CB2500790 /* Roboto-Medium.ttf in Resources */,
38BE891D962D4F349AF2917E /* Roboto-Regular.ttf in Resources */,
4664335C02E54CEEA39B7112 /* Merriweather-Regular.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXShellScriptBuildPhase section */
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
);
name = "Bundle React Native code and images";
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
};
1E250219C895BEA3A3B522F8 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-RNBareExample-RNBareExampleTests-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
3461A323C30894E61CCBE9AB /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-frameworks-${CONFIGURATION}-input-files.xcfilelist",
);
name = "[CP] Embed Pods Frameworks";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-frameworks-${CONFIGURATION}-output-files.xcfilelist",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
4064C66412A1431AEB98707F /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-resources-${CONFIGURATION}-input-files.xcfilelist",
);
name = "[CP] Copy Pods Resources";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-resources-${CONFIGURATION}-output-files.xcfilelist",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-resources.sh\"\n";
showEnvVarsInLog = 0;
};
5025BCA1300C603C2631117B /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-resources-${CONFIGURATION}-input-files.xcfilelist",
);
name = "[CP] Copy Pods Resources";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-resources-${CONFIGURATION}-output-files.xcfilelist",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-resources.sh\"\n";
showEnvVarsInLog = 0;
};
80A9B916640DA44574A6BFE9 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-frameworks-${CONFIGURATION}-input-files.xcfilelist",
);
name = "[CP] Embed Pods Frameworks";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-frameworks-${CONFIGURATION}-output-files.xcfilelist",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
817A1C3BBB37E467A160595B /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-RNBareExample-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
FD10A7F022414F080027D42C /* Start Packager */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
);
name = "Start Packager";
outputFileListPaths = (
);
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n";
showEnvVarsInLog = 0;
};
/* End PBXShellScriptBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
00E356EA1AD99517003FC87E /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
00E356F31AD99517003FC87E /* RNBareExampleTests.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
13B07FC11A68108700A75B9A /* main.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXTargetDependency section */
00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
isa = PBXTargetDependency;
target = 13B07F861A680F5B00A75B9A /* RNBareExample */;
targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
};
/* End PBXTargetDependency section */
/* Begin XCBuildConfiguration section */
00E356F61AD99517003FC87E /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 48A3F3B34B71A627C36D23AE /* Pods-RNBareExample-RNBareExampleTests.debug.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
INFOPLIST_FILE = RNBareExampleTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/Frameworks",
"@loader_path/Frameworks",
);
OTHER_LDFLAGS = (
"-ObjC",
"-lc++",
"$(inherited)",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/RNBareExample.app/RNBareExample";
};
name = Debug;
};
00E356F71AD99517003FC87E /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = BE9748D91138D25975CC7644 /* Pods-RNBareExample-RNBareExampleTests.release.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
COPY_PHASE_STRIP = NO;
INFOPLIST_FILE = RNBareExampleTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/Frameworks",
"@loader_path/Frameworks",
);
OTHER_LDFLAGS = (
"-ObjC",
"-lc++",
"$(inherited)",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/RNBareExample.app/RNBareExample";
};
name = Release;
};
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = DC9506A1E7FC0D9474DB233B /* Pods-RNBareExample.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
ENABLE_BITCODE = NO;
INFOPLIST_FILE = RNBareExample/Info.plist;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/Frameworks",
);
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = RNBareExample;
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0;
VERSIONING_SYSTEM = "apple-generic";
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 6C3E26B903A9FBC8FEAD0366 /* Pods-RNBareExample.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
INFOPLIST_FILE = RNBareExample/Info.plist;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/Frameworks",
);
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = RNBareExample;
SWIFT_VERSION = 5.0;
VERSIONING_SYSTEM = "apple-generic";
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
LD_RUNPATH_SEARCH_PATHS = (
/usr/lib/swift,
"$(inherited)",
);
LIBRARY_SEARCH_PATHS = (
"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
"\"$(inherited)\"",
);
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 10.0;
LD_RUNPATH_SEARCH_PATHS = (
/usr/lib/swift,
"$(inherited)",
);
LIBRARY_SEARCH_PATHS = (
"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
"\"$(inherited)\"",
);
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "RNBareExampleTests" */ = {
isa = XCConfigurationList;
buildConfigurations = (
00E356F61AD99517003FC87E /* Debug */,
00E356F71AD99517003FC87E /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "RNBareExample" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "RNBareExample" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}
================================================
FILE: RNBareExample/ios/RNBareExample.xcodeproj/xcshareddata/xcschemes/RNBareExample.xcscheme
================================================
================================================
FILE: RNBareExample/ios/RNBareExample.xcworkspace/contents.xcworkspacedata
================================================
================================================
FILE: RNBareExample/ios/RNBareExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
================================================
IDEDidComputeMac32BitWarning
================================================
FILE: RNBareExample/ios/RNBareExampleTests/Info.plist
================================================
CFBundleDevelopmentRegionenCFBundleExecutable$(EXECUTABLE_NAME)CFBundleIdentifier$(PRODUCT_BUNDLE_IDENTIFIER)CFBundleInfoDictionaryVersion6.0CFBundleName$(PRODUCT_NAME)CFBundlePackageTypeBNDLCFBundleShortVersionString1.0CFBundleSignature????CFBundleVersion1
================================================
FILE: RNBareExample/ios/RNBareExampleTests/RNBareExampleTests.m
================================================
#import
#import
#import
#import
#define TIMEOUT_SECONDS 600
#define TEXT_TO_LOOK_FOR @"Welcome to React"
@interface RNBareExampleTests : XCTestCase
@end
@implementation RNBareExampleTests
- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
{
if (test(view)) {
return YES;
}
for (UIView *subview in [view subviews]) {
if ([self findSubviewInView:subview matching:test]) {
return YES;
}
}
return NO;
}
- (void)testRendersWelcomeScreen
{
UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
BOOL foundElement = NO;
__block NSString *redboxError = nil;
#ifdef DEBUG
RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
if (level >= RCTLogLevelError) {
redboxError = message;
}
});
#endif
while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
[[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
[[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
return YES;
}
return NO;
}];
}
#ifdef DEBUG
RCTSetLogFunction(RCTDefaultLogFunction);
#endif
XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
}
@end
================================================
FILE: RNBareExample/metro.config.js
================================================
const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
const escape = require('escape-string-regexp');
const pak = require('../package.json');
const root = path.resolve(__dirname, '..');
const modules = Object.keys({
...pak.peerDependencies,
});
module.exports = {
projectRoot: __dirname,
watchFolders: [root],
// We need to make sure that only one version is loaded for peerDependencies
// So we blacklist them at the root, and alias them to the versions in example's node_modules
resolver: {
blacklistRE: blacklist(
modules.map(
m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
),
),
extraNodeModules: modules.reduce((acc, name) => {
acc[name] = path.join(__dirname, 'node_modules', name);
return acc;
}, {}),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
================================================
FILE: RNBareExample/package.json
================================================
{
"name": "RNBareExample",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-safe-area-context": "^3.2.0",
"react-native-svg": "^12.1.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@types/jest": "^26.0.23",
"@types/react-native": "^0.64.5",
"@types/react-test-renderer": "^16.9.2",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1",
"typescript": "^3.8.3"
},
"resolutions": {
"@types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
================================================
FILE: RNBareExample/react-native.config.js
================================================
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts'],
};
================================================
FILE: RNBareExample/tsconfig.json
================================================
{
"compilerOptions": {
"paths": {
"native-base": ["../src/index"]
},
/* Basic Options */
"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
"lib": [
"es2017"
] /* Specify library files to be included in the compilation. */,
"allowJs": true /* Allow javascript files to be compiled. */,
// "checkJs": true, /* Report errors in .js files. */
"jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "removeComments": true, /* Do not emit comments to output. */
"noEmit": true /* Do not emit outputs. */,
// "incremental": true, /* Enable incremental compilation */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
"skipLibCheck": false /* Skip type checking of declaration files. */
/* Source Map Options */
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins:
process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : [],
};
================================================
FILE: cli.js
================================================
const { exec } = require('child_process');
const path = require('path');
const fs = require('fs');
// Copy directory
function copyDir(src, dest) {
fs.mkdirSync(dest, { recursive: true });
let entries = fs.readdirSync(src, { withFileTypes: true });
for (let entry of entries) {
let srcPath = path.join(src, entry.name);
let destPath = path.join(dest, entry.name);
entry.isDirectory()
? copyDir(srcPath, destPath)
: fs.copyFileSync(srcPath, destPath);
}
}
const themeFolder = path.join(__dirname, 'src', 'theme');
const outDirectory = path.join(process.cwd(), 'theme');
const themeTemp = path.join(process.cwd(), 'theme-temp');
const transpileScript = `tsc ${themeTemp}/index.ts --target esnext --moduleResolution node --outDir ${outDirectory} --skipLibCheck true --allowSyntheticDefaultImports true`;
const VALID_ARGS = ['eject:theme'];
const ejectTheme = async () => {
await copyDir(themeFolder, themeTemp);
await promisifyExec(transpileScript);
fs.rmSync(themeTemp, { recursive: true, force: true });
console.log('Theme ejected successfully!');
console.log('Theme folder is placed in ' + process.cwd() + ' directory.');
};
const main = () => {
const myArgs = process.argv.slice(2);
invokeFunctionBasedOnArgs(myArgs[0]);
};
const invokeFunctionBasedOnArgs = (arg) => {
switch (arg) {
case VALID_ARGS[0]: {
ejectTheme();
break;
}
default: {
console.log('No arguments matched. Valid arguments are ', VALID_ARGS);
break;
}
}
};
const promisifyExec = (command) => {
return new Promise((resolve, reject) => {
exec(command, (error, stdout, stderr) => {
console.log(stdout);
console.log(stderr);
if (error !== null) {
reject(error);
console.log(`exec error: ${error}`);
}
resolve();
});
});
};
main();
================================================
FILE: example/.eslintrc.json
================================================
{
"extends": ["@react-native-community", "prettier"],
"rules": {
"prettier/prettier": [
"error",
{
"quoteProps": "preserve",
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
],
"no-bitwise": 0,
"prefer-const": "warn",
"no-console": "off"
},
"plugins": ["prettier"]
}
================================================
FILE: example/.nvmrc
================================================
v14.19.0
================================================
FILE: example/App.tsx
================================================
import React from 'react';
import StoryBookUI from './storybook';
import { useFonts } from 'expo-font';
export default () => {
const [loaded] = useFonts({
'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),
'Roboto-Italic': require('./assets/fonts/Roboto-Italic.ttf'),
'Roboto-Light': require('./assets/fonts/Roboto-Light.ttf'),
'Roboto-Regular': require('./assets/fonts/Roboto-Regular.ttf'),
'Roboto-Medium': require('./assets/fonts/Roboto-Medium.ttf'),
'Montserrat-Bold': require('./assets/fonts/Montserrat-Bold.ttf'),
'Montserrat-Italic': require('./assets/fonts/Montserrat-Italic.ttf'),
'Montserrat-Light': require('./assets/fonts/Montserrat-Light.ttf'),
'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
'Montserrat-Medium': require('./assets/fonts/Montserrat-Medium.ttf'),
'Montserrat-MediumItalic': require('./assets/fonts/Montserrat-MediumItalic.ttf'),
'Montserrat-Black': require('./assets/fonts/Montserrat-Black.ttf'),
'Montserrat-BlackItalic': require('./assets/fonts/Montserrat-BlackItalic.ttf'),
'Montserrat-ExtraBold': require('./assets/fonts/Montserrat-ExtraBold.ttf'),
'Montserrat-ExtraBoldItalic': require('./assets/fonts/Montserrat-ExtraBoldItalic.ttf'),
'Montserrat-SemiBold': require('./assets/fonts/Montserrat-SemiBold.ttf'),
'Montserrat-SemiBoldItalic': require('./assets/fonts/Montserrat-SemiBoldItalic.ttf'),
});
if (!loaded) return null;
return ;
};
================================================
FILE: example/__mocks__/@react-native-async-storage/async-storage.js
================================================
import DefaultValue from '@react-native-async-storage/async-storage/jest/async-storage-mock';
export default DefaultValue;
================================================
FILE: example/__mocks__/globalMock.js
================================================
jest.mock('global', () => ({
...global,
WebSocket: function WebSocket() {},
}));
jest.mock('react-native-keyboard-aware-scroll-view', () => {
const KeyboardAwareScrollView = ({ children }) => children;
return { KeyboardAwareScrollView };
});
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
================================================
FILE: example/app.json
================================================
{
"name": "NativeBaseExample",
"displayName": "NativeBase Example",
"packagerOpts": {
"config": "metro.config.js"
},
"expo": {
"name": "NativeBase Example",
"slug": "native-base-example",
"description": "Example app for Nativebase",
"privacy": "public",
"version": "1.0.0",
"platforms": ["ios", "android", "web"],
"ios": {
"supportsTablet": true
},
"assetBundlePatterns": ["**/*"]
}
}
================================================
FILE: example/babel.config.js
================================================
const path = require('path');
const pak = require('../package.json');
module.exports = function (api) {
api.cache(true);
return {
presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],
plugins: [
[
'module-resolver',
{
alias: {
// For development, we want to alias the library to the source
[pak.name]: path.join(__dirname, '..', pak.source),
},
},
],
],
};
};
================================================
FILE: example/jest-android.config.js
================================================
const config = {
preset: 'jest-expo/android',
transformIgnorePatterns: [
'/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
],
setupFilesAfterEnv: ['/__mocks__/globalMock.js'],
};
module.exports = config;
================================================
FILE: example/jest-ios.config.js
================================================
const config = {
preset: 'jest-expo/ios',
transformIgnorePatterns: [
'/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
],
setupFilesAfterEnv: ['/__mocks__/globalMock.js'],
};
module.exports = config;
================================================
FILE: example/jest.config.js
================================================
const config = {
projects: [{ preset: 'jest-expo/web' }, { preset: 'jest-expo/node' }],
transformIgnorePatterns: [
'/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
],
setupFilesAfterEnv: ['/__mocks__/globalMock.js'],
globals: {
window: {},
},
moduleNameMapper: {
'^.+\\.(css|less)$': '/__mocks__/styleMock.js', // replaces .css imports with an empty object
'\\.(jpg|png|gif|ttf|eot|svg)$': '/__mocks__/fileMock.js', // replaces file imports with a useless string
'^react($|/.+)': '/node_modules/react$1', // makes sure all React imports are running off of the one in this package.
},
};
module.exports = config;
================================================
FILE: example/metro.config.js
================================================
const path = require('path');
const blacklist = require('metro-config/src/defaults/exclusionList');
const escape = require('escape-string-regexp');
const pak = require('../package.json');
const root = path.resolve(__dirname, '..');
const modules = Object.keys({
...pak.peerDependencies,
});
module.exports = {
projectRoot: __dirname,
watchFolders: [root],
// We need to make sure that only one version is loaded for peerDependencies
// So we blacklist them at the root, and alias them to the versions in example's node_modules
resolver: {
blacklistRE: blacklist(
modules.map(
(m) =>
new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
)
),
extraNodeModules: modules.reduce((acc, name) => {
acc[name] = path.join(__dirname, 'node_modules', name);
return acc;
}, {}),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
================================================
FILE: example/nativebase.config.ts
================================================
import { INativebaseConfig } from 'native-base';
export default {
dependencies: {
'linear-gradient': require('expo-linear-gradient').LinearGradient,
},
// strictMode: 'warn',
} as INativebaseConfig;
================================================
FILE: example/package.json
================================================
{
"name": "native-base-example",
"description": "Example app for NativeBase",
"version": "0.0.3",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"storybook": "start-storybook -p 7007",
"build-storybook": "build-storybook",
"postinstall": "patch-package",
"test": "bash scripts/test.sh",
"update-test": "yarn test -u"
},
"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-native-aria/overlays": "^0.2.9",
"@react-native-async-storage/async-storage": "~1.17.3",
"expo": "^46.0.0",
"expo-font": "~10.2.0",
"expo-linear-gradient": "~11.4.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"formik": "^2.2.6",
"react": "18.0.0",
"react-hook-form": "^6.14.0",
"react-native": "0.69.6",
"react-native-keyboard-aware-scroll-view": "^0.9.4",
"react-native-safe-area-context": "4.3.1",
"react-native-svg": "12.3.0",
"react-native-web": "~0.18.7",
"webpack-dev-server": "3"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/runtime": "^7.12.5",
"@expo/webpack-config": "^0.17.0",
"@storybook/addon-actions": "^5.3",
"@storybook/addon-knobs": "^5.3",
"@storybook/addon-links": "^5.3",
"@storybook/addon-ondevice-actions": "^5.3.23",
"@storybook/addon-ondevice-knobs": "^5.3.23",
"@storybook/addon-storyshots": "6.3",
"@storybook/react-native": "^5.3.23",
"@storybook/react-native-server": "^5.3.23",
"@types/react": "~18.0.0",
"@types/react-dom": "~18.0.0",
"@types/react-native": "~0.69.1",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.0.0",
"core-js": "3.6.5",
"jest": "^26.6.3",
"jest-expo": "^46.0.0",
"metro-react-native-babel-preset": "^0.64.0",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"react-dom": "18.0.0",
"react-test-renderer": "17.0.1",
"typescript": "^4.6.3"
},
"private": false
}
================================================
FILE: example/patches/core-js+3.6.5.patch
================================================
diff --git a/node_modules/core-js/modules/es.promise.js b/node_modules/core-js/modules/es.promise.js
index b79d2bc..e69de29 100644
--- a/node_modules/core-js/modules/es.promise.js
+++ b/node_modules/core-js/modules/es.promise.js
@@ -1,379 +0,0 @@
-'use strict';
-var $ = require('../internals/export');
-var IS_PURE = require('../internals/is-pure');
-var global = require('../internals/global');
-var getBuiltIn = require('../internals/get-built-in');
-var NativePromise = require('../internals/native-promise-constructor');
-var redefine = require('../internals/redefine');
-var redefineAll = require('../internals/redefine-all');
-var setToStringTag = require('../internals/set-to-string-tag');
-var setSpecies = require('../internals/set-species');
-var isObject = require('../internals/is-object');
-var aFunction = require('../internals/a-function');
-var anInstance = require('../internals/an-instance');
-var classof = require('../internals/classof-raw');
-var inspectSource = require('../internals/inspect-source');
-var iterate = require('../internals/iterate');
-var checkCorrectnessOfIteration = require('../internals/check-correctness-of-iteration');
-var speciesConstructor = require('../internals/species-constructor');
-var task = require('../internals/task').set;
-var microtask = require('../internals/microtask');
-var promiseResolve = require('../internals/promise-resolve');
-var hostReportErrors = require('../internals/host-report-errors');
-var newPromiseCapabilityModule = require('../internals/new-promise-capability');
-var perform = require('../internals/perform');
-var InternalStateModule = require('../internals/internal-state');
-var isForced = require('../internals/is-forced');
-var wellKnownSymbol = require('../internals/well-known-symbol');
-var V8_VERSION = require('../internals/engine-v8-version');
-
-var SPECIES = wellKnownSymbol('species');
-var PROMISE = 'Promise';
-var getInternalState = InternalStateModule.get;
-var setInternalState = InternalStateModule.set;
-var getInternalPromiseState = InternalStateModule.getterFor(PROMISE);
-var PromiseConstructor = NativePromise;
-var TypeError = global.TypeError;
-var document = global.document;
-var process = global.process;
-var $fetch = getBuiltIn('fetch');
-var newPromiseCapability = newPromiseCapabilityModule.f;
-var newGenericPromiseCapability = newPromiseCapability;
-var IS_NODE = classof(process) == 'process';
-var DISPATCH_EVENT = !!(document && document.createEvent && global.dispatchEvent);
-var UNHANDLED_REJECTION = 'unhandledrejection';
-var REJECTION_HANDLED = 'rejectionhandled';
-var PENDING = 0;
-var FULFILLED = 1;
-var REJECTED = 2;
-var HANDLED = 1;
-var UNHANDLED = 2;
-var Internal, OwnPromiseCapability, PromiseWrapper, nativeThen;
-
-var FORCED = isForced(PROMISE, function () {
- var GLOBAL_CORE_JS_PROMISE = inspectSource(PromiseConstructor) !== String(PromiseConstructor);
- if (!GLOBAL_CORE_JS_PROMISE) {
- // V8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables
- // https://bugs.chromium.org/p/chromium/issues/detail?id=830565
- // We can't detect it synchronously, so just check versions
- if (V8_VERSION === 66) return true;
- // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test
- if (!IS_NODE && typeof PromiseRejectionEvent != 'function') return true;
- }
- // We need Promise#finally in the pure version for preventing prototype pollution
- if (IS_PURE && !PromiseConstructor.prototype['finally']) return true;
- // We can't use @@species feature detection in V8 since it causes
- // deoptimization and performance degradation
- // https://github.com/zloirock/core-js/issues/679
- if (V8_VERSION >= 51 && /native code/.test(PromiseConstructor)) return false;
- // Detect correctness of subclassing with @@species support
- var promise = PromiseConstructor.resolve(1);
- var FakePromise = function (exec) {
- exec(function () { /* empty */ }, function () { /* empty */ });
- };
- var constructor = promise.constructor = {};
- constructor[SPECIES] = FakePromise;
- return !(promise.then(function () { /* empty */ }) instanceof FakePromise);
-});
-
-var INCORRECT_ITERATION = FORCED || !checkCorrectnessOfIteration(function (iterable) {
- PromiseConstructor.all(iterable)['catch'](function () { /* empty */ });
-});
-
-// helpers
-var isThenable = function (it) {
- var then;
- return isObject(it) && typeof (then = it.then) == 'function' ? then : false;
-};
-
-var notify = function (promise, state, isReject) {
- if (state.notified) return;
- state.notified = true;
- var chain = state.reactions;
- microtask(function () {
- var value = state.value;
- var ok = state.state == FULFILLED;
- var index = 0;
- // variable length - can't use forEach
- while (chain.length > index) {
- var reaction = chain[index++];
- var handler = ok ? reaction.ok : reaction.fail;
- var resolve = reaction.resolve;
- var reject = reaction.reject;
- var domain = reaction.domain;
- var result, then, exited;
- try {
- if (handler) {
- if (!ok) {
- if (state.rejection === UNHANDLED) onHandleUnhandled(promise, state);
- state.rejection = HANDLED;
- }
- if (handler === true) result = value;
- else {
- if (domain) domain.enter();
- result = handler(value); // can throw
- if (domain) {
- domain.exit();
- exited = true;
- }
- }
- if (result === reaction.promise) {
- reject(TypeError('Promise-chain cycle'));
- } else if (then = isThenable(result)) {
- then.call(result, resolve, reject);
- } else resolve(result);
- } else reject(value);
- } catch (error) {
- if (domain && !exited) domain.exit();
- reject(error);
- }
- }
- state.reactions = [];
- state.notified = false;
- if (isReject && !state.rejection) onUnhandled(promise, state);
- });
-};
-
-var dispatchEvent = function (name, promise, reason) {
- var event, handler;
- if (DISPATCH_EVENT) {
- event = document.createEvent('Event');
- event.promise = promise;
- event.reason = reason;
- event.initEvent(name, false, true);
- global.dispatchEvent(event);
- } else event = { promise: promise, reason: reason };
- if (handler = global['on' + name]) handler(event);
- else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);
-};
-
-var onUnhandled = function (promise, state) {
- task.call(global, function () {
- var value = state.value;
- var IS_UNHANDLED = isUnhandled(state);
- var result;
- if (IS_UNHANDLED) {
- result = perform(function () {
- if (IS_NODE) {
- process.emit('unhandledRejection', value, promise);
- } else dispatchEvent(UNHANDLED_REJECTION, promise, value);
- });
- // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should
- state.rejection = IS_NODE || isUnhandled(state) ? UNHANDLED : HANDLED;
- if (result.error) throw result.value;
- }
- });
-};
-
-var isUnhandled = function (state) {
- return state.rejection !== HANDLED && !state.parent;
-};
-
-var onHandleUnhandled = function (promise, state) {
- task.call(global, function () {
- if (IS_NODE) {
- process.emit('rejectionHandled', promise);
- } else dispatchEvent(REJECTION_HANDLED, promise, state.value);
- });
-};
-
-var bind = function (fn, promise, state, unwrap) {
- return function (value) {
- fn(promise, state, value, unwrap);
- };
-};
-
-var internalReject = function (promise, state, value, unwrap) {
- if (state.done) return;
- state.done = true;
- if (unwrap) state = unwrap;
- state.value = value;
- state.state = REJECTED;
- notify(promise, state, true);
-};
-
-var internalResolve = function (promise, state, value, unwrap) {
- if (state.done) return;
- state.done = true;
- if (unwrap) state = unwrap;
- try {
- if (promise === value) throw TypeError("Promise can't be resolved itself");
- var then = isThenable(value);
- if (then) {
- microtask(function () {
- var wrapper = { done: false };
- try {
- then.call(value,
- bind(internalResolve, promise, wrapper, state),
- bind(internalReject, promise, wrapper, state)
- );
- } catch (error) {
- internalReject(promise, wrapper, error, state);
- }
- });
- } else {
- state.value = value;
- state.state = FULFILLED;
- notify(promise, state, false);
- }
- } catch (error) {
- internalReject(promise, { done: false }, error, state);
- }
-};
-
-// constructor polyfill
-if (FORCED) {
- // 25.4.3.1 Promise(executor)
- PromiseConstructor = function Promise(executor) {
- anInstance(this, PromiseConstructor, PROMISE);
- aFunction(executor);
- Internal.call(this);
- var state = getInternalState(this);
- try {
- executor(bind(internalResolve, this, state), bind(internalReject, this, state));
- } catch (error) {
- internalReject(this, state, error);
- }
- };
- // eslint-disable-next-line no-unused-vars
- Internal = function Promise(executor) {
- setInternalState(this, {
- type: PROMISE,
- done: false,
- notified: false,
- parent: false,
- reactions: [],
- rejection: false,
- state: PENDING,
- value: undefined
- });
- };
- Internal.prototype = redefineAll(PromiseConstructor.prototype, {
- // `Promise.prototype.then` method
- // https://tc39.github.io/ecma262/#sec-promise.prototype.then
- then: function then(onFulfilled, onRejected) {
- var state = getInternalPromiseState(this);
- var reaction = newPromiseCapability(speciesConstructor(this, PromiseConstructor));
- reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;
- reaction.fail = typeof onRejected == 'function' && onRejected;
- reaction.domain = IS_NODE ? process.domain : undefined;
- state.parent = true;
- state.reactions.push(reaction);
- if (state.state != PENDING) notify(this, state, false);
- return reaction.promise;
- },
- // `Promise.prototype.catch` method
- // https://tc39.github.io/ecma262/#sec-promise.prototype.catch
- 'catch': function (onRejected) {
- return this.then(undefined, onRejected);
- }
- });
- OwnPromiseCapability = function () {
- var promise = new Internal();
- var state = getInternalState(promise);
- this.promise = promise;
- this.resolve = bind(internalResolve, promise, state);
- this.reject = bind(internalReject, promise, state);
- };
- newPromiseCapabilityModule.f = newPromiseCapability = function (C) {
- return C === PromiseConstructor || C === PromiseWrapper
- ? new OwnPromiseCapability(C)
- : newGenericPromiseCapability(C);
- };
-
- if (!IS_PURE && typeof NativePromise == 'function') {
- nativeThen = NativePromise.prototype.then;
-
- // wrap native Promise#then for native async functions
- redefine(NativePromise.prototype, 'then', function then(onFulfilled, onRejected) {
- var that = this;
- return new PromiseConstructor(function (resolve, reject) {
- nativeThen.call(that, resolve, reject);
- }).then(onFulfilled, onRejected);
- // https://github.com/zloirock/core-js/issues/640
- }, { unsafe: true });
-
- // wrap fetch result
- if (typeof $fetch == 'function') $({ global: true, enumerable: true, forced: true }, {
- // eslint-disable-next-line no-unused-vars
- fetch: function fetch(input /* , init */) {
- return promiseResolve(PromiseConstructor, $fetch.apply(global, arguments));
- }
- });
- }
-}
-
-$({ global: true, wrap: true, forced: FORCED }, {
- Promise: PromiseConstructor
-});
-
-setToStringTag(PromiseConstructor, PROMISE, false, true);
-setSpecies(PROMISE);
-
-PromiseWrapper = getBuiltIn(PROMISE);
-
-// statics
-$({ target: PROMISE, stat: true, forced: FORCED }, {
- // `Promise.reject` method
- // https://tc39.github.io/ecma262/#sec-promise.reject
- reject: function reject(r) {
- var capability = newPromiseCapability(this);
- capability.reject.call(undefined, r);
- return capability.promise;
- }
-});
-
-$({ target: PROMISE, stat: true, forced: IS_PURE || FORCED }, {
- // `Promise.resolve` method
- // https://tc39.github.io/ecma262/#sec-promise.resolve
- resolve: function resolve(x) {
- return promiseResolve(IS_PURE && this === PromiseWrapper ? PromiseConstructor : this, x);
- }
-});
-
-$({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {
- // `Promise.all` method
- // https://tc39.github.io/ecma262/#sec-promise.all
- all: function all(iterable) {
- var C = this;
- var capability = newPromiseCapability(C);
- var resolve = capability.resolve;
- var reject = capability.reject;
- var result = perform(function () {
- var $promiseResolve = aFunction(C.resolve);
- var values = [];
- var counter = 0;
- var remaining = 1;
- iterate(iterable, function (promise) {
- var index = counter++;
- var alreadyCalled = false;
- values.push(undefined);
- remaining++;
- $promiseResolve.call(C, promise).then(function (value) {
- if (alreadyCalled) return;
- alreadyCalled = true;
- values[index] = value;
- --remaining || resolve(values);
- }, reject);
- });
- --remaining || resolve(values);
- });
- if (result.error) reject(result.value);
- return capability.promise;
- },
- // `Promise.race` method
- // https://tc39.github.io/ecma262/#sec-promise.race
- race: function race(iterable) {
- var C = this;
- var capability = newPromiseCapability(C);
- var reject = capability.reject;
- var result = perform(function () {
- var $promiseResolve = aFunction(C.resolve);
- iterate(iterable, function (promise) {
- $promiseResolve.call(C, promise).then(capability.resolve, reject);
- });
- });
- if (result.error) reject(result.value);
- return capability.promise;
- }
-});
================================================
FILE: example/scripts/test.sh
================================================
#!/bin/bash
lowercase(){
echo "$1" | sed "y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/"
}
OS=`lowercase \`uname\``
case "$OS" in
msys*) rmdir /s /q node_modules/react node_modules/react-native ;;
cygwin*) rmdir /s /q node_modules/react node_modules/react-native ;;
*) rm -fR node_modules/react node_modules/react-native ;;
esac
red=`tput setaf 1`
green=`tput setaf 2`
reset=`tput sgr0`
#TODO:- run script with nvm use/ facing issues with yarn test working with npm run test
# script to be added
#unset PREFIX
# . ~/.nvm/nvm.sh
# nvm install v14.19.0
# nvm use
if [ $# -eq 0 ]
then
jest --config jest-ios.config.js --silent
jest --config jest-android.config.js --silent
NODEVERSION=$(node -v)
echo "you are using node version $NODEVERSION"
if [ $NODEVERSION != "v14.19.0" ]
then
echo "${red}Error! Node module v14.19.0 is not present or nvm is not installed
${green}If you have node v14.19.0 run 'nvm use'
Else run 'nvm install v14.19.0'${reset} "
else
jest --silent
fi
else
echo "Tests will be updated!"
jest --config jest-ios.config.js -u --silent
jest --config jest-android.config.js -u --silent
NODEVERSION=$(node -v)
echo "you are using node version $NODEVERSION"
if [ $NODEVERSION != "v14.19.0" ]
then
jest -u --silent
echo "${red}Error! Node module v14.19.0 is not present or nvm is not installed
${green}If you have node v14.19.0 run 'nvm use'
Else run 'nvm install v14.19.0'${reset} "
else
jest -u --silent
fi
fi
yarn install --check-files
================================================
FILE: example/storybook/addons.ts
================================================
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-ondevice-actions/register';
================================================
FILE: example/storybook/index.ts
================================================
// if you use expo remove this line
import { AppRegistry } from 'react-native';
import {
getStorybookUI,
configure,
addDecorator,
} from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import './rn-addons';
import AsyncStorage from '@react-native-async-storage/async-storage';
// enables knobs for all stories
addDecorator(withKnobs);
// import stories
configure(() => {
require('./stories');
}, module);
// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({
// DOC: Uncomment this to get normal app view
// onDeviceUI: false,
asyncStorage: AsyncStorage,
});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
export default StorybookUIRoot;
================================================
FILE: example/storybook/rn-addons.ts
================================================
import '@storybook/addon-ondevice-actions/register';
import '@storybook/addon-ondevice-knobs/register';
================================================
FILE: example/storybook/stories/community-integrations/Formik/Basic.tsx
================================================
import { Input, Button, FormControl } from 'native-base';
import React from 'react';
import { useFormik, FormikErrors } from 'formik';
type IFormFields = {
firstName?: string;
lastName?: string;
email?: string;
};
function validateEmail(email: string) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
export const Example = () => {
const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
},
onSubmit: async (values) => {
console.log('Handle submit', values);
},
validate: (values) => {
let errors: FormikErrors = {};
if (!values.firstName) {
errors.firstName = 'Required';
} else if (values.firstName.length > 15) {
errors.firstName = 'Max allowed characters 15';
}
if (!values.email) {
errors.email = 'Required';
} else if (!validateEmail(values.email)) {
errors.email = 'Please enter a valid email address';
}
return errors;
},
});
const { handleChange, handleSubmit, errors, values } = formik;
console.log(values);
return (
<>
First Name{errors.firstName}Last NameEmail{errors.email}
);
};
================================================
FILE: example/storybook/stories/community-integrations/Formik/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../components/Wrapper';
import { Example as Basic } from './Basic';
storiesOf('Formik', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/DemoForm.tsx
================================================
import {
VStack,
Input,
Button,
FormControl,
Heading,
Box,
Text,
Divider,
HStack,
TextArea,
Avatar,
Select,
Checkbox,
Icon,
} from 'native-base';
import React from 'react';
import { Ionicons, EvilIcons, AntDesign } from '@expo/vector-icons';
export const Example = () => {
const [language, setLanguage] = React.useState('eng');
const [currency, setCurrency] = React.useState('usd');
return (
Account Settings
Personal Info
Name
Email
Bio
Brief description for your profile. URLs are hyperlinked.
Profile Photo
JD
}
colorScheme="light"
>
Change photo
.jpg, .gif, or .png. Max file size 700K.
Language
Display Language
Display currency
Notifications
Get updates about the latest meetups.
Get notifications about your account activites.
Connect accounts
}>
Connect Github
}
>
Connect Google
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/NumberInput.tsx
================================================
import {
VStack,
Button,
FormControl,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
interface IFormInput {
version: boolean;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
Current Native Base Version: (
onChange(val)}
defaultValue={value}
>
)}
name="version"
rules={{ required: 'Field is required' }}
defaultValue={3}
/>
{errors.version?.message}
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/PinInput.tsx
================================================
import { VStack, Button, FormControl, PinInput } from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
interface IFormInput {
otp: string;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
OTP: (
onChange(val)} value={value}>
)}
name="otp"
rules={{ required: 'Field is required', minLength: 4, maxLength: 4 }}
/>
{errors.otp?.message}
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/RadioAndCheckbox.tsx
================================================
import {
VStack,
Button,
FormControl,
Radio,
Checkbox,
Text,
Icon,
} from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { MaterialCommunityIcons } from '@expo/vector-icons';
interface IFormInput {
hobbies: string;
gender: number;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
Hobbies (
{
onChange(values);
}}
flexDirection="row"
>
}
>
Darts}
>
Movie}
>
Camping}
>
Chess
)}
rules={{ required: 'Atleast 1 hobbie needed' }}
name="hobbies"
defaultValue=""
/>
{errors.hobbies?.message}
Gender (
onChange(val)}
>
MaleFemale
)}
name="gender"
rules={{ required: 'Gender is required' }}
/>
{errors.gender?.message}
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/Select.tsx
================================================
import { VStack, Button, FormControl, Select, Icon } from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { MaterialIcons } from '@expo/vector-icons';
interface IFormInput {
language: number;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
Fav language: (
)}
name="language"
rules={{ required: 'Field is required' }}
defaultValue="js"
/>
{errors.language?.message}
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/Slider.tsx
================================================
import { VStack, Button, FormControl, Slider } from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
interface IFormInput {
like: number;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
Amount you like NativeBase (
onChange(val)} defaultValue={value}>
)}
name="like"
rules={{ required: 'Field is required', minLength: 3 }}
defaultValue={100}
/>
{errors.like?.message}
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/Switch.tsx
================================================
import { VStack, Button, FormControl, Switch } from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
interface IFormInput {
rememberMe: boolean;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
Remenber me: (
onChange(val)}
isChecked={value}
/>
)}
name="rememberMe"
defaultValue={true}
/>
{errors.rememberMe?.message}
);
};
================================================
FILE: example/storybook/stories/community-integrations/ReactHookForm/Textarea.tsx
================================================
import { VStack, Button, FormControl, TextArea } from 'native-base';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
interface IFormInput {
thought: string;
}
export const Example = () => {
const { control, handleSubmit, errors } = useForm();
const onSubmit = (data: IFormInput) => {
console.log('submiting with ', data);
};
return (
What do you think? (
);
};
================================================
FILE: example/storybook/stories/components/Wrapper.tsx
================================================
import React from 'react';
import {
Box,
NativeBaseProvider,
useColorMode,
IconButton,
MoonIcon,
ColorMode,
useColorModeValue,
Tooltip,
SunIcon,
extendTheme,
Button,
Input,
} from 'native-base';
import type { StorageManager } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Config from '../../../nativebase.config';
const myTheme = extendTheme({
space: {
mySpace: '29px',
},
colors: {
blue1: {
'100': 'blue',
},
},
components: {
Link: {
sizes: {
mysize: 10,
},
},
Button: {
variants: {
myBtn: {
padding: 10,
},
myNewButton: ({ myPaddingX }: { myPaddingX: number }) => {
return {
padding: myPaddingX,
};
},
// myNewButton1: (props: any) => {
// return {
// padding: props.padding,
// };
// },
},
sizes: {
newsize: ({ mySize }: { mySize: number }) => {
return {
padding: mySize,
};
},
},
},
Input: {
variants: {
newsize: ({ mySize }: { mySize: number }) => {
return {
padding: mySize,
};
},
newsize1: (props: any) => {
return {
padding: props.padding,
};
},
},
sizes: {
'my-size': {
padding: 2,
},
},
},
Checkbox: {
sizes: {
myBtn: {
padding: 10,
},
myNewButton: ({ myPadding }: { myPadding: any }) => {
return {
padding: myPadding,
};
},
},
},
Box: {
variants: {
myBtn: {
padding: 10,
},
},
},
},
});
type MyThemeType = typeof myTheme;
declare module 'native-base' {
interface ICustomTheme extends MyThemeType {}
}
function MyWrapper({ children }: any) {
const { colorMode, toggleColorMode } = useColorMode();
const bgColor = useColorModeValue(`gray.50`, `gray.800`);
return (
: }
size="lg"
/>
{children}
);
}
export function RenderTestButton() {
const [state, setState] = React.useState(1);
return (
);
}
export default ({ children, theme }: any) => {
const colorModeManager: StorageManager = {
get: async () => {
try {
const val = await AsyncStorage.getItem('@example-wrapper-mode');
return val === 'dark' ? 'dark' : 'light';
} catch (e) {
console.log(e);
return 'light';
}
},
set: async (value: ColorMode) => {
try {
await AsyncStorage.setItem('@example-wrapper-mode', value);
} catch (e) {
console.log(e);
}
},
};
return (
{children}
);
};
================================================
FILE: example/storybook/stories/components/basic/FlatList/Basic.tsx
================================================
import React from 'react';
import {
Box,
FlatList,
Heading,
Avatar,
HStack,
VStack,
Text,
Spacer,
} from 'native-base';
export const Example = () => {
const data = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
fullName: 'Aafreen Khan',
timeStamp: '12:47 PM',
recentText: 'Good Day!',
avatarUrl:
'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
fullName: 'Sujitha Mathur',
timeStamp: '11:11 PM',
recentText: 'Cheer up, there!',
avatarUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
fullName: 'Anci Barroco',
timeStamp: '6:22 PM',
recentText: 'Good Day!',
avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg',
},
{
id: '68694a0f-3da1-431f-bd56-142371e29d72',
fullName: 'Aniket Kumar',
timeStamp: '8:56 PM',
recentText: 'All the best',
avatarUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU',
},
{
id: '28694a0f-3da1-471f-bd96-142456e29d72',
fullName: 'Kiara',
timeStamp: '12:47 PM',
recentText: 'I will call today.',
avatarUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU',
},
];
return (
Inbox
(
{item.fullName}
{item.recentText}
{item.timeStamp}
)}
keyExtractor={(item) => item.id}
/>
);
};
================================================
FILE: example/storybook/stories/components/basic/FlatList/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('FlatList', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx
================================================
import React from 'react';
import {
Input,
KeyboardAvoidingView,
Text,
Button,
VStack,
Heading,
Center,
} from 'native-base';
import { Platform } from 'react-native';
export const Example = () => {
return (
Forgot Password
Not to worry! Enter email address associated with your account and
we’ll send a link to reset your password.
);
};
================================================
FILE: example/storybook/stories/components/basic/KeyboardAvoidingView/Kitchensink-Basic.tsx
================================================
import React from 'react';
import {
Input,
KeyboardAvoidingView,
Text,
Button,
VStack,
useBreakpointValue,
} from 'native-base';
import { Platform } from 'react-native';
export const Example = () => {
const isLargeScreen = useBreakpointValue({
base: false,
sm: false,
md: false,
lg: true,
});
return (
{isLargeScreen ? (
Please see the example in your mobile to observe the effect
) : (
Header
)}
);
};
================================================
FILE: example/storybook/stories/components/basic/KeyboardAvoidingView/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('KeyboardAvoidingView', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/basic/ScrollView/Basic.tsx
================================================
import React from 'react';
import { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';
export const Example = () => {
const { colors } = useTheme();
return (
Cyan
{Object.keys(colors.cyan).map((key, index) => {
if (index >= 1 && index <= 5)
return (
{key}
);
})}
Yellow
{Object.keys(colors.cyan).map((key, index) => {
if (index >= 1 && index <= 5)
return (
{key}
);
})}
Violet
{Object.keys(colors.violet).map((key, index) => {
if (index >= 1 && index <= 5)
return (
{key}
);
})}
);
};
================================================
FILE: example/storybook/stories/components/basic/ScrollView/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('ScrollView', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/basic/SectionList/Basic.tsx
================================================
import React from 'react';
import { SectionList, Heading, Center } from 'native-base';
export const Example = () => {
const data = [
{
title: 'Cyan',
data: ['cyan.100', 'cyan.200', 'cyan.300', 'cyan.400', 'cyan.500'],
},
{
title: 'Yellow',
data: [
'yellow.100',
'yellow.200',
'yellow.300',
'yellow.400',
'yellow.500',
],
},
{
title: 'Violet',
data: [
'violet.100',
'violet.200',
'violet.300',
'violet.400',
'violet.500',
],
},
];
return (
item + index}
renderItem={({ item }) => (
{item.split('.')[1]}
)}
renderSectionHeader={({ section: { title } }) => (
{title}
)}
/>
);
};
================================================
FILE: example/storybook/stories/components/basic/SectionList/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('SectionList', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/basic/StatusBar/Basic.tsx
================================================
import React, { useState } from 'react';
import { StatusBar, Box, Text, Button } from 'native-base';
export const Example = () => {
const [hidden, setHidden] = useState(false);
const changeStatusBarVisibility = () => setHidden(!hidden);
return (
StatusBar Visibility:{'\n'}
{hidden ? 'Hidden' : 'Visible'}
);
};
================================================
FILE: example/storybook/stories/components/basic/StatusBar/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('StatusBar', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/basic/View/Basic.tsx
================================================
import React from 'react';
import { View, Text, Heading } from 'native-base';
export const Example = () => {
return (
A component library for the{' '}
React Ecosystem
NativeBase is a simple, modular and accessible component library that
gives you building blocks to build you React applications.
);
};
================================================
FILE: example/storybook/stories/components/basic/View/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('View', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/composites/Accordion/AccessingInternalState.tsx
================================================
import React from 'react';
import { Accordion, Box, Icon } from 'native-base';
import { MaterialCommunityIcons } from '@expo/vector-icons';
export const Example = () => {
return (
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
{({ isExpanded }: any) => (
<>
{isExpanded ? 'Fire' : 'Snow'}
{isExpanded ? (
) : (
)}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
)}
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/Basic.tsx
================================================
import React from 'react';
import { Accordion, Box } from 'native-base';
export const Example = () => {
return (
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/DefaultIndex.tsx
================================================
import React from 'react';
import { Accordion, Box } from 'native-base';
export const Example = () => {
return (
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/ExpandedStyle.tsx
================================================
import React from 'react';
import { Accordion, Box } from 'native-base';
export const Example = () => {
return (
Click me to see a different style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
I'm Disabled 😢
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/Multiple.tsx
================================================
import React from 'react';
import { Accordion, Box } from 'native-base';
export const Example = () => {
return (
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/Playground.tsx
================================================
import React from 'react';
import { Accordion, Box } from 'native-base';
import { boolean } from '@storybook/addon-knobs';
export const Example = () => {
return (
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/Toggle.tsx
================================================
import React from 'react';
import { Accordion, Box } from 'native-base';
export const Example = () => {
return (
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
);
};
================================================
FILE: example/storybook/stories/components/composites/Accordion/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Usage from './Basic';
import Playground from './Playground';
import Multiple from './Multiple';
import AccessingInternalState from './AccessingInternalState';
import ExpandedStyle from './ExpandedStyle';
import Toggle from './Toggle';
import DefaultIndex from './DefaultIndex';
storiesOf('Accordion', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => )
.add('Multiple', () => )
.add('Default Index', () => )
.add('Toggle', () => )
.add('Expanded Style', () => )
.add('Accessing Internal State', () => );
================================================
FILE: example/storybook/stories/components/composites/Actionsheet/Composition.tsx
================================================
import React from 'react';
import {
Button,
Actionsheet,
useDisclose,
Box,
Text,
Center,
} from 'native-base';
export function Example() {
const { isOpen, onOpen, onClose } = useDisclose();
return (
Albums
DeleteSharePlayFavouriteCancel
);
}
================================================
FILE: example/storybook/stories/components/composites/Actionsheet/CustomBackdrop.tsx
================================================
import React from 'react';
import { Button, Actionsheet, useDisclose, Box, Text } from 'native-base';
export function Example() {
const { isOpen, onOpen, onClose } = useDisclose();
return (
<>
Albums
DeleteSharePlayFavouriteCancel
);
}
================================================
FILE: example/storybook/stories/components/composites/Actionsheet/DisableOverlay.tsx
================================================
import React from 'react';
import {
Button,
Actionsheet,
useDisclose,
Box,
Text,
Center,
} from 'native-base';
export function Example() {
const { isOpen, onOpen, onClose } = useDisclose();
return (
Albums
DeleteSharePlayFavouriteCancel
);
}
================================================
FILE: example/storybook/stories/components/composites/Actionsheet/Icon.tsx
================================================
import React from 'react';
import {
Button,
Actionsheet,
useDisclose,
Icon,
Box,
Text,
Center,
} from 'native-base';
import { Path } from 'react-native-svg';
import { MaterialIcons, Ionicons } from '@expo/vector-icons';
export function Example() {
const { isOpen, onOpen, onClose } = useDisclose();
return (
Albums
}
>
Delete
}
>
Share
}
>
Play
}
>
Favourite
}
>
Cancel
);
}
================================================
FILE: example/storybook/stories/components/composites/Actionsheet/Usage.tsx
================================================
import React from 'react';
import {
Button,
Actionsheet,
useDisclose,
Text,
Box,
Center,
} from 'native-base';
export function Example() {
const { isOpen, onOpen, onClose } = useDisclose();
return (
Albums
DeleteSharePlayFavouriteCancel
);
}
================================================
FILE: example/storybook/stories/components/composites/Actionsheet/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Icon } from './Icon';
import { Example as Usage } from './Usage';
import { Example as Composition } from './Composition';
import { Example as DisableOverlay } from './DisableOverlay';
import { Example as CustomBackdrop } from './CustomBackdrop';
storiesOf('Actionsheet', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Usage', () => )
.add('Icon', () => )
.add('DisableOverlay', () => )
.add('Composition', () => )
.add('Custom Backdrop', () => );
================================================
FILE: example/storybook/stories/components/composites/Alert/action.tsx
================================================
import React from 'react';
import {
Alert,
Collapse,
Button,
VStack,
HStack,
IconButton,
CloseIcon,
Box,
Text,
} from 'native-base';
export function Example() {
const [show, setShow] = React.useState(true);
return (
Please try again later!
}
_icon={{ color: 'coolGray.600' }}
onPress={() => setShow(false)}
/>
Your coupon could not be processed at this time.
);
}
================================================
FILE: example/storybook/stories/components/composites/Alert/basic.tsx
================================================
import React from 'react';
import {
Alert,
VStack,
HStack,
IconButton,
CloseIcon,
Box,
Heading,
Center,
} from 'native-base';
export const Example = () => {
return (
We are going live in July!
}
_icon={{ color: 'coolGray.600' }}
/>
We are happy to announce that we are going live on July 28th. Get
ready!
);
};
================================================
FILE: example/storybook/stories/components/composites/Alert/colorScheme.tsx
================================================
import React from 'react';
import {
Stack,
Alert,
Text,
HStack,
VStack,
IconButton,
Box,
CloseIcon,
} from 'native-base';
export function Example() {
return (
{['red', 'orange', 'pink'].map((key: any) => (
Please try again later!
}
_icon={{ color: 'coolGray.600' }}
/>
Your coupon could not be processed at this time.
))}
);
}
================================================
FILE: example/storybook/stories/components/composites/Alert/composition.tsx
================================================
import React from 'react';
import {
Alert,
Box,
IconButton,
CloseIcon,
HStack,
VStack,
Text,
Center,
} from 'native-base';
export function Example() {
return (
Application received!
}
_icon={{ color: 'coolGray.600' }}
/>
Your application has been received. We will review your
application and respond within the next 48 hours.
Application received!
Your application has been received. We will review your
application and respond within the next 48 hours.
);
}
================================================
FILE: example/storybook/stories/components/composites/Alert/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
// import { Example as Playground } from './knobEnabled';
import { Example as Composition } from './composition';
import { Example as Basic } from './basic';
import { Example as Usage } from './usage';
import { Example as Variant } from './variant';
import { Example as Status } from './status';
import { Example as ColorScheme } from './colorScheme';
import { Example as Action } from './action';
storiesOf('Alert', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
// .add('Playground', () => )
.add('Basic', () => )
.add('Usage', () => )
.add('Status', () => )
.add('ColorScheme', () => )
.add('Variant', () => )
.add('Composition', () => )
.add('action', () => );
================================================
FILE: example/storybook/stories/components/composites/Alert/knobEnabled.tsx
================================================
import React from 'react';
import { Alert, Box, CloseIcon, IconButton, Text } from 'native-base';
import { select } from '@storybook/addon-knobs';
export const Example = () => {
return (
} />}
actionProps={{ alignSelf: 'center' }}
>
Error AlertDescription
);
};
================================================
FILE: example/storybook/stories/components/composites/Alert/status.tsx
================================================
import React from 'react';
import {
Stack,
Alert,
IconButton,
HStack,
VStack,
CloseIcon,
Text,
} from 'native-base';
export function Example() {
const statusArray = [
{
status: 'success',
title: 'Selection successfully moved!',
},
{
status: 'error',
title: 'Please try again later!',
},
{
status: 'info',
title: 'We are going live in July!',
},
{
status: 'warning',
title: 'Poor internet connection.',
},
];
return (
{statusArray.map((status) => {
return (
{status.title}
}
_icon={{ color: 'coolGray.600' }}
/>
);
})}
);
}
================================================
FILE: example/storybook/stories/components/composites/Alert/usage.tsx
================================================
import React from 'react';
import {
Alert,
VStack,
HStack,
IconButton,
CloseIcon,
Box,
Text,
Center,
} from 'native-base';
export function Example() {
return (
We are going live in July!
}
_icon={{ color: 'coolGray.600' }}
/>
We are happy to announce that we are going live on July 28th. Get
ready!
Delete Customer
This will remove all data relating to Alex. This action cannot be
reversed. Deleted data can not be recovered.
);
};
================================================
FILE: example/storybook/stories/components/composites/AlertDialog/Transition.tsx
================================================
import React from 'react';
import { AlertDialog, Button, Center } from 'native-base';
import type { TouchableOpacity } from 'react-native';
export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
const onClose = () => setIsOpen(false);
const cancelRef = React.useRef(null);
return (
Discard Changes?
Are you sure you want to discard all of your notes? 44 words will be
deleted.
);
};
================================================
FILE: example/storybook/stories/components/composites/AlertDialog/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Transition } from './Transition';
storiesOf('AlertDialog', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Transition', () => );
================================================
FILE: example/storybook/stories/components/composites/AppBar/AppBarExamples.tsx
================================================
import React from 'react';
import {
AppBar,
IconButton,
Icon,
Text,
HStack,
VStack,
Button,
} from 'native-base';
import { TouchableOpacity } from 'react-native';
export default function Examples() {
return (
);
}
function Material() {
return (
Title
Subtitle
);
}
function IOSLike() {
return (
Back
Header
);
}
function Customized() {
return (
}
/>
Library
}
/>
);
}
function CustomizedWithBorder() {
return (
} />
Home
} />
}
/>
}
/>
);
}
const LeftArrowIconButton = () => {
return (
}
/>
);
};
const HeartIcon = () => {
return (
}
/>
);
};
const SearchIcon = () => {
return (
}
/>
);
};
const MoreIcon = () => {
return } />;
};
================================================
FILE: example/storybook/stories/components/composites/AppBar/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Examples from './AppBarExamples';
storiesOf('AppBar', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Examples', () => );
================================================
FILE: example/storybook/stories/components/composites/AspectRatio/Basic.tsx
================================================
import React from 'react';
import { AspectRatio, Box } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/AspectRatio/EmbedImage.tsx
================================================
import React from 'react';
import { AspectRatio, Image } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/AspectRatio/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as EmbedImage } from './EmbedImage';
storiesOf('AspectRatio', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('EmbedImage', () => );
================================================
FILE: example/storybook/stories/components/composites/Avatar/AvatarBadge.tsx
================================================
import React from 'react';
import { Avatar, VStack } from 'native-base';
export const Example = () => {
return (
NB
NB
NB
NB
NB
NB
);
};
================================================
FILE: example/storybook/stories/components/composites/Avatar/AvatarGroup.tsx
================================================
import React from 'react';
import { Avatar, Center } from 'native-base';
export const Example = () => {
return (
AJ
TE
JB
TS
AJ
TE
JB
TS
);
};
================================================
FILE: example/storybook/stories/components/composites/Avatar/Fallback.tsx
================================================
import React from 'react';
import { Avatar, HStack } from 'native-base';
export const Example = () => {
return (
RS
MR
--
);
};
================================================
FILE: example/storybook/stories/components/composites/Avatar/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Playground } from './knobEnabled';
import { Example as Usage } from './usage';
import { Example as Size } from './size';
import { Example as Fallback } from './Fallback';
import { Example as AvatarBadge } from './AvatarBadge';
import { Example as AvatarGroup } from './AvatarGroup';
storiesOf('Avatar', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => )
.add('Size', () => )
.add('Fallback', () => )
.add('AvatarBadge', () => )
.add('AvatarGroup', () => );
================================================
FILE: example/storybook/stories/components/composites/Avatar/knobEnabled.tsx
================================================
import React from 'react';
import { Avatar } from 'native-base';
import { select, number, text } from '@storybook/addon-knobs';
export const Example = () => {
return (
{text('name', 'NB')}
);
};
================================================
FILE: example/storybook/stories/components/composites/Avatar/size.tsx
================================================
import React from 'react';
import { Avatar, VStack, Center } from 'native-base';
export const Example = () => {
return (
AJ
HS
RS
AK
GG
RB
);
};
================================================
FILE: example/storybook/stories/components/composites/Avatar/usage.tsx
================================================
import React from 'react';
import { Avatar, HStack } from 'native-base';
export const Example = () => {
return (
AJ
TE
JB
TS
);
};
================================================
FILE: example/storybook/stories/components/composites/Badge/color.tsx
================================================
import React from 'react';
import { Badge, HStack } from 'native-base';
export function Example() {
return (
SUCCESSDANGERINFODARK
);
}
================================================
FILE: example/storybook/stories/components/composites/Badge/composition.tsx
================================================
import React from 'react';
import { Badge, Button, VStack, Box } from 'native-base';
export function Example() {
return (
2
);
}
================================================
FILE: example/storybook/stories/components/composites/Badge/icons.tsx
================================================
import React from 'react';
import { Badge, Stack, AddIcon } from 'native-base';
export const Example = () => {
return (
}>
SUCCESS
}
>
SUCCESS
);
};
================================================
FILE: example/storybook/stories/components/composites/Badge/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Usage } from './usage';
import { Example as Color } from './color';
import { Example as Playground } from './knobEnabled';
import { Example as Variants } from './variants';
import { Example as Composition } from './composition';
import { Example as Icon } from './icons';
storiesOf('Badge', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => )
.add('Icon', () => )
.add('Color', () => )
.add('Variants', () => )
.add('Composition', () => );
================================================
FILE: example/storybook/stories/components/composites/Badge/knobEnabled.tsx
================================================
import React from 'react';
import { Badge } from 'native-base';
import { select, text } from '@storybook/addon-knobs';
export function Example() {
return (
NATIVEBASE
);
}
================================================
FILE: example/storybook/stories/components/composites/Badge/usage.tsx
================================================
import React from 'react';
import { Badge, Box } from 'native-base';
export function Example() {
return (
NEW FEATURE
);
}
================================================
FILE: example/storybook/stories/components/composites/Badge/variants.tsx
================================================
//@ts-nocheck
import React from 'react';
import { Badge, HStack, VStack, Box } from 'native-base';
export function Example() {
return (
{['solid', 'outline', 'subtle'].map((key) => (
DEFAULT
SUCCESS
ERROR
INFO
WARNING
))}
);
}
================================================
FILE: example/storybook/stories/components/composites/Breadcrumb/Basic.tsx
================================================
import React from 'react';
import { Breadcrumb, Box, Heading } from 'native-base';
export const Example = () => {
return (
Default Breadcrumb
Home (This is currently active)
DocsGithub
);
};
================================================
FILE: example/storybook/stories/components/composites/Breadcrumb/Collapsible.tsx
================================================
import React, { useState } from 'react';
import { Breadcrumb, Box, Heading, HStack, Button } from 'native-base';
import {
MaterialCommunityIcons,
MaterialIcons,
AntDesign,
} from '@expo/vector-icons';
export const Example = () => {
const [collapsed, setCollapsed] = useState(true);
return (
<>
Breadcrumb Collapsible {
setCollapsed(!collapsed);
}}
>
}
mr={1}
size="xs"
_current={{ color: 'blue.500' }}
/>
Home
}
mr={1}
size="xs"
_current={{ color: 'blue.500' }}
/>
Discord
Docs}
mr={1}
size="xs"
_current={{ color: 'red.500' }}
/>
Github (This is currently active)
);
};
================================================
FILE: example/storybook/stories/components/composites/Breadcrumb/ComponentSeparator.tsx
================================================
import React from 'react';
import { Breadcrumb, Box, Heading, Icon } from 'native-base';
import { Ionicons } from '@expo/vector-icons';
export const Example = () => {
return (
Breadcrumb with Custom Separator} size={5} />
}
>
Home (This is currently active)
Docs
Github
);
};
================================================
FILE: example/storybook/stories/components/composites/Breadcrumb/Composition.tsx
================================================
import React from 'react';
import { Breadcrumb, Box, Heading, HStack } from 'native-base';
import {
MaterialCommunityIcons,
MaterialIcons,
AntDesign,
} from '@expo/vector-icons';
export const Example = () => {
return (
Breadcrumb Composition}
mr={1}
size="xs"
/>
Home
Docs}
mr={1}
size="xs"
/>
Github (This is currently active)
);
};
================================================
FILE: example/storybook/stories/components/composites/Breadcrumb/Separators.tsx
================================================
import React from 'react';
import { Breadcrumb, Box, Heading } from 'native-base';
export const Example = () => {
return (
Breadcrumb with String Separator
Home (This is currently active)
Docs
Github
);
};
================================================
FILE: example/storybook/stories/components/composites/Breadcrumb/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Separators } from './Separators';
import { Example as ComponentSeparator } from './ComponentSeparator';
import { Example as Composition } from './Composition';
import { Example as Collapsible } from './Collapsible';
storiesOf('Breadcrumb', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Separators', () => )
.add('ComponentSeparator', () => )
.add('Composition', () => )
.add('Collapsible', () => );
================================================
FILE: example/storybook/stories/components/composites/Card/Basic.tsx
================================================
import React from 'react';
import { Card, HStack, Heading, Text, Spacer, Flex } from 'native-base';
export function Example() {
return (
Open Source
1 month ago
NativeBase
NativeBase is a component library that enables devs to build universal
design systems.
Read More
);
}
================================================
FILE: example/storybook/stories/components/composites/Card/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
storiesOf('Card', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/composites/Center/Basic.tsx
================================================
import React from 'react';
import { Center } from 'native-base';
export function Example() {
return (
This is the Center
);
}
================================================
FILE: example/storybook/stories/components/composites/Center/SquareCircle.tsx
================================================
import React from 'react';
import { Circle, Square, Box, HStack, Icon } from 'native-base';
import { MaterialIcons } from '@expo/vector-icons';
export function Example() {
return (
} color="white" size={5} />
20
);
}
================================================
FILE: example/storybook/stories/components/composites/Center/WithIcons.tsx
================================================
import React from 'react';
import { Center, Box, HStack, Icon } from 'native-base';
import { MaterialIcons } from '@expo/vector-icons';
export function Example() {
return (
} color="white" size={6} />
20
);
}
================================================
FILE: example/storybook/stories/components/composites/Center/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as WithIcons } from './WithIcons';
import { Example as SquareCircle } from './SquareCircle';
storiesOf('Center', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('WithIcons', () => )
.add('SquareCircle', () => );
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/Basic.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center } from 'native-base';
export const Example = () => {
return (
Default CircularProgress
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/ColorScheme.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center, VStack } from 'native-base';
export const Example = () => {
return (
Changing the ColorSchemes
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/Colors.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center } from 'native-base';
import { text } from '@storybook/addon-knobs';
export const Example = () => {
return (
Changing the color
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/Indeterminate.tsx
================================================
import React from 'react';
import { CircularProgress, Center, Heading } from 'native-base';
export const Example = () => {
return (
Indeterminate Progress
60%
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/Label.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center } from 'native-base';
export const Example = () => {
return (
Adding label60%
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/MinMax.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center, Box, Text } from 'native-base';
import { number } from '@storybook/addon-knobs';
export const Example = () => {
return (
Adding Min and Max
550 / 1000
Min: 100Max: 1000
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/Sizes.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center, VStack } from 'native-base';
export const Example = () => {
return (
Changing the sizes
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/Thickness.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center } from 'native-base';
export const Example = () => {
return (
Changing the thickness
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/TrackColor.tsx
================================================
import React from 'react';
import { CircularProgress, Heading, Center } from 'native-base';
import { text } from '@storybook/addon-knobs';
export const Example = () => {
return (
Changing the TrackColor
);
};
================================================
FILE: example/storybook/stories/components/composites/CircularProgress/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Basic from './Basic';
import Colors from './Colors';
import Sizes from './Sizes';
import Label from './Label';
import Thickness from './Thickness';
import Indeterminate from './Indeterminate';
import TrackColor from './TrackColor';
import MinMax from './MinMax';
import ColorScheme from './ColorScheme';
storiesOf('CircularProgress', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('ColorScheme', () => )
.add('Colors', () => )
.add('TrackColor', () => )
.add('Label', () => )
.add('Sizes', () => )
.add('Thickness', () => )
.add('Min and Max', () => )
.add('Indeterminate', () => );
================================================
FILE: example/storybook/stories/components/composites/CloseButton/Basic.tsx
================================================
import React from 'react';
import { CloseButton } from 'native-base';
export const Example = () => {
return ;
};
================================================
FILE: example/storybook/stories/components/composites/CloseButton/Sizes.tsx
================================================
import React from 'react';
import { CloseButton, HStack } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/CloseButton/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Basic from './Basic';
import Sizes from './Sizes';
storiesOf('CloseButton', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Sizes', () => );
================================================
FILE: example/storybook/stories/components/composites/Code/Basic.tsx
================================================
import React from 'react';
import { Code } from 'native-base';
export const Example = () => {
return Hello World!;
};
================================================
FILE: example/storybook/stories/components/composites/Code/colors.tsx
================================================
import React from 'react';
import { Code, Stack } from 'native-base';
export const Example = () => {
return (
let direction = "row";console.log('Hey there!');yarn add native-baseReact Native
);
};
================================================
FILE: example/storybook/stories/components/composites/Code/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Basic from './Basic';
import Colors from './colors';
storiesOf('Code', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Colors', () => );
================================================
FILE: example/storybook/stories/components/composites/Collapse/Basic.tsx
================================================
import React from 'react';
import { Collapse, Stack, Heading, Button, Text } from 'native-base';
export const Example = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
return (
Default Collapse
Candy canes macaroon croissant carrot cake soufflé toffee topping
pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread
biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet
roll I love. Pastry pastry powder pie lemon drops chocolate topping
dessert.
);
};
================================================
FILE: example/storybook/stories/components/composites/Collapse/Callback.tsx
================================================
import React from 'react';
import { Collapse, Stack, Heading, Button, Text } from 'native-base';
export const Example = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
const [text, setText] = React.useState(
'This text would change when the collapse animation start'
);
const handleText = () =>
setText(
show
? 'Collapse is open'
: 'This text would change when the collapse animation start'
);
const [color, setColor] = React.useState('emerald');
const handleColorToggle = () =>
setColor(color === 'emerald' ? 'indigo' : 'emerald');
return (
Collapse with callbacks{text}
Candy canes macaroon croissant carrot cake soufflé toffee topping
pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread
biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet
roll I love. Pastry pastry powder pie lemon drops chocolate topping
dessert.
);
};
================================================
FILE: example/storybook/stories/components/composites/Collapse/Duration.tsx
================================================
import React from 'react';
import { Collapse, Stack, Heading, Text, Button } from 'native-base';
export const Example = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
return (
Collapse with duration
Candy canes macaroon croissant carrot cake soufflé toffee topping
pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread
biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet
roll I love. Pastry pastry powder pie lemon drops chocolate topping
dessert.
);
};
================================================
FILE: example/storybook/stories/components/composites/Collapse/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Basic from './Basic';
import Callback from './Callback';
import Duration from './Duration';
storiesOf('Collapse', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Animation Duration', () => )
.add('onAnimationStart and onAnimationEnd', () => );
================================================
FILE: example/storybook/stories/components/composites/Container/Playground.tsx
================================================
import React from 'react';
import { Heading, Container, Text } from 'native-base';
import { boolean, text } from '@storybook/addon-knobs';
export const Example = () => {
return (
Benefits to a joint design and development system
There are many benefits to a joint design and development system. Not
only does it bring benefits to the design team, but it also brings
benefits to engineering teams. It makes sure that our experiences have a
consistent look and feel, not just in our design specs, but in
production
);
};
================================================
FILE: example/storybook/stories/components/composites/Container/centeringChildren.tsx
================================================
import React from 'react';
import { Container, Text, Heading } from 'native-base';
export const Example = () => {
return (
Benefits
There are many benefits to a joint design and development system. Not
only does it bring benefits to the design team, but it also brings
benefits to engineering teams. It makes sure that our experiences have a
consistent look and feel, not just in our design specs, but in
production
);
};
================================================
FILE: example/storybook/stories/components/composites/Container/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Usage } from './usage';
import { Example as Playground } from './Playground';
storiesOf('Container', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => );
================================================
FILE: example/storybook/stories/components/composites/Container/usage.tsx
================================================
import React from 'react';
import { Container, Text, Heading, Center } from 'native-base';
export function Example() {
return (
A component library for the
React Ecosystem
NativeBase is a simple, modular and accessible component library that
gives you building blocks to build you React applications.
);
}
================================================
FILE: example/storybook/stories/components/composites/Divider/Basic.tsx
================================================
import React from 'react';
import { Divider, Heading, Box } from 'native-base';
export const Example = () => {
return (
Chrome
Firefox
);
};
================================================
FILE: example/storybook/stories/components/composites/Divider/Composition.tsx
================================================
import React from 'react';
import { Divider, Flex, Text, Box } from 'native-base';
export const Example = () => {
return (
SimpleEasyBeautiful
);
};
================================================
FILE: example/storybook/stories/components/composites/Divider/Orientation.tsx
================================================
import React from 'react';
import { Divider, Flex, Box, Heading } from 'native-base';
export const Example = () => {
return (
ShoesGirlsBoys
);
};
================================================
FILE: example/storybook/stories/components/composites/Divider/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Orientation } from './Orientation';
import { Example as Composition } from './Composition';
storiesOf('Divider', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Orientation', () => )
.add('Composition', () => );
================================================
FILE: example/storybook/stories/components/composites/Drawer/Basic.tsx
================================================
import React from 'react';
import { Box, Button, Drawer } from 'native-base';
import { useState } from 'react';
import { Dimensions } from 'react-native';
const Basic = () => {
const [showModal, setShowModal] = useState(false);
return (
<>
setShowModal(false)}
placement="right"
>
);
};
export default Basic;
================================================
FILE: example/storybook/stories/components/composites/Drawer/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import Basic from './Basic';
storiesOf('Drawer', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/composites/Fab/Basic.tsx
================================================
import { Fab, Icon, Box } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
} size="sm" />}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/CustomPosition.tsx
================================================
import { Fab, Icon, Box } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
} />}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/DocsBasic.tsx
================================================
import { Fab, Icon, Box, Center } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/DocsCustomPosition.tsx
================================================
import { Fab, Icon, Box, Center } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/DocsPlacement.tsx
================================================
import { Fab, Icon, Box, Center } from 'native-base';
import React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
export const Example = () => {
return (
}
label="Quick Start"
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/Kitchensink-Basic.tsx
================================================
import { Fab, Icon, Box, NativeBaseProvider } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
} size="sm" />}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/Kitchensink-CustomPosition.tsx
================================================
import { Fab, Icon, NativeBaseProvider, Box } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
} />}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/Kitchensink-Placement.tsx
================================================
import { Fab, Icon, Text, NativeBaseProvider, Box } from 'native-base';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
export const Example = () => {
return (
} size={4} />}
label={
BUTTON
}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/Placement.tsx
================================================
import { Fab, Icon, Box } from 'native-base';
import React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
export const Example = () => {
return (
}
size="4"
/>
}
label="Quick Start"
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/Fab/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Placement } from './Placement';
import { Example as Basic } from './Basic';
import { Example as CustomPosition } from './CustomPosition';
storiesOf('Fab', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Placement', () => )
.add('CustomPosition', () => );
================================================
FILE: example/storybook/stories/components/composites/FormControl/CustomStyle.tsx
================================================
import React from 'react';
import {
FormControl,
Input,
Stack,
Text,
Divider,
Box,
WarningOutlineIcon,
ScrollView,
} from 'native-base';
export const Example = () => {
return (
Default
Project Title
Give your project a title.
Disabled
Project Title
Give your project a title.
Invalid
Project Title}
>
Something is wrong.
);
};
================================================
FILE: example/storybook/stories/components/composites/FormControl/Playground.tsx
================================================
import React from 'react';
import { FormControl, Input, Stack } from 'native-base';
import { boolean } from '@storybook/addon-knobs';
export const Example = () => {
return (
Favorite framework
We'll keep this between us.
Something is wrong.
);
};
================================================
FILE: example/storybook/stories/components/composites/FormControl/Usage.tsx
================================================
import React from 'react';
import {
FormControl,
Input,
Stack,
WarningOutlineIcon,
Box,
} from 'native-base';
export const Example = () => {
return (
Password
Must be atleast 6 characters.
}
>
Atleast 6 characters are required.
);
};
================================================
FILE: example/storybook/stories/components/composites/FormControl/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Usage } from './Usage';
import { Example as CustomStyle } from './CustomStyle';
import { Example as Playground } from './Playground';
storiesOf('FormControl', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => )
.add('CustomStyle', () => );
================================================
FILE: example/storybook/stories/components/composites/IconButton/Basic.tsx
================================================
import React from 'react';
import { IconButton, Icon, Box } from 'native-base';
import { Entypo } from '@expo/vector-icons';
export const Example = () => {
return (
}
borderRadius="full"
_icon={{
color: 'orange.500',
size: 'md',
}}
_hover={{
bg: 'orange.600:alpha.20',
}}
_pressed={{
bg: 'orange.600:alpha.20',
_icon: {
name: 'emoji-flirt',
},
_ios: {
_icon: {
size: '2xl',
},
},
}}
_ios={{
_icon: {
size: '2xl',
},
}}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/IconButton/SVGIcon.tsx
================================================
import React from 'react';
import { IconButton, Icon, VStack } from 'native-base';
import { Path } from 'react-native-svg';
export const Example = () => {
return (
{/* Suggested */}
console.log('IconButton pressed')}
_icon={{
viewBox: '0 0 100 100',
size: 10,
strokeWidth: '10',
width: '100',
height: '100',
}}
>
{/* Alternatively */}
console.log('IconButton pressed')}
icon={
}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/IconButton/Sizes.tsx
================================================
import React from 'react';
import { IconButton, Center, VStack } from 'native-base';
import { MaterialIcons } from '@expo/vector-icons';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/IconButton/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Sizes } from './Sizes';
import { Example as Variant } from './Variant';
import { Example as SVGIcon } from './SVGIcon';
storiesOf('IconButton', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Sizes', () => )
.add('Variant', () => )
.add('SVGIcon', () => );
================================================
FILE: example/storybook/stories/components/composites/Kbd/Basic.tsx
================================================
import React from 'react';
import { VStack, HStack, Kbd, Text } from 'native-base';
export const Example = () => {
return (
shift + Cshift then Halt or option
);
};
================================================
FILE: example/storybook/stories/components/composites/Kbd/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Basic from './Basic';
storiesOf('Kbd', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/composites/Menu/Basic.tsx
================================================
import React from 'react';
import { Menu, HamburgerIcon, Box, Pressable } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Menu/Group.tsx
================================================
import React from 'react';
import { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Menu/MenuOptionsGroup.tsx
================================================
import React from 'react';
import { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Menu/MenuPositions.tsx
================================================
import React from 'react';
import { Menu, Button, VStack, Select, CheckIcon } from 'native-base';
export function Example() {
const [shouldOverlapWithTrigger] = React.useState(false);
const [position, setPosition] = React.useState('auto');
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Menu/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Group } from './Group';
import { Example as MenuOptionsGroup } from './MenuOptionsGroup';
import { Example as MenuPositions } from './MenuPositions';
storiesOf('Menu', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Group', () => )
.add('MenuOptionsGroup', () => )
.add('Menu positions', () => );
================================================
FILE: example/storybook/stories/components/composites/Modal/Basic.tsx
================================================
import React from 'react';
import { Button, Modal, FormControl, Input, Center } from 'native-base';
import { useState } from 'react';
export const Example = () => {
const [showModal, setShowModal] = useState(false);
return (
setShowModal(false)}>
Contact UsNameEmail
);
};
================================================
FILE: example/storybook/stories/components/composites/Modal/CustomBackdrop.tsx
================================================
import React from 'react';
import { Button, Modal, Center } from 'native-base';
import { useState } from 'react';
export const Example = () => {
const [showModal, setShowModal] = useState(false);
return (
setShowModal(false)}
_backdrop={{ _dark: { bg: 'coolGray.800' }, bg: 'warmGray.50' }}
>
Return Policy
Create a 'Return Request' under “My Orders” section of App/Website.
Follow the screens that come up after tapping on the 'Return’
button. Please make a note of the Return ID that we generate at the
end of the process. Keep the item ready for pick up or ship it to us
basis on the return mode.
);
};
================================================
FILE: example/storybook/stories/components/composites/Modal/ModalPlacement.tsx
================================================
//@ts-nocheck
import React from 'react';
import { Button, Modal, Stack, FormControl, Input } from 'native-base';
import { useState } from 'react';
export const Example = () => {
const [placement, setPlacement] = useState(undefined);
const [open, setOpen] = useState(false);
const openModal = (placement) => {
setOpen(true);
setPlacement(placement);
};
return (
<>
setOpen(false)} safeAreaTop={true}>
Contact UsNameEmail
);
};
const styles = {
top: {
marginBottom: 'auto',
marginTop: 0,
},
bottom: {
marginBottom: 0,
marginTop: 'auto',
},
left: {
marginLeft: 0,
marginRight: 'auto',
},
right: {
marginLeft: 'auto',
marginRight: 0,
},
center: {},
};
================================================
FILE: example/storybook/stories/components/composites/Modal/ModalRefEg.tsx
================================================
import React from 'react';
import { Modal, Button, Input, FormControl, HStack } from 'native-base';
export function Example() {
const [modalVisible, setModalVisible] = React.useState(false);
const initialRef = React.useRef(null);
const finalRef = React.useRef(null);
return (
<>
setModalVisible(false)}
initialFocusRef={initialRef}
finalFocusRef={finalRef}
>
Contact UsNameEmail
);
}
================================================
FILE: example/storybook/stories/components/composites/Modal/ModalWithAvoidKeyboard.tsx
================================================
import React from 'react';
import { Modal, Button, Input, VStack, Text, FormControl } from 'native-base';
export function Example() {
const [modalVisible, setModalVisible] = React.useState(false);
return (
<>
setModalVisible(false)}
avoidKeyboard
justifyContent="flex-end"
bottom="4"
size="lg"
>
Forgot Password?
Enter email address and we'll send a link to reset your password.
Email
Open modal and focus on the input element to see the effect.
);
}
================================================
FILE: example/storybook/stories/components/composites/Modal/MultipleModal.tsx
================================================
import React from 'react';
import {
Button,
Modal,
VStack,
HStack,
Text,
Radio,
Center,
} from 'native-base';
import { useState } from 'react';
export const Example = () => {
const [showModal, setShowModal] = useState(false);
const [showModal2, setShowModal2] = useState(false);
const [showModal3, setShowModal3] = useState(false);
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Modal/Size.tsx
================================================
// @ts-nocheck
import React from 'react';
import { Modal, Button, ScrollView, Text, Center, VStack } from 'native-base';
export function Example() {
const [modalVisible, setModalVisible] = React.useState(false);
const [size, setSize] = React.useState('md');
const handleSizeClick = (newSize) => {
setSize(newSize);
setModalVisible(!modalVisible);
};
return (
<>
Return Policy
Create a 'Return Request' under “My Orders” section of
App/Website. Follow the screens that come up after tapping on
the 'Return’ button. Please make a note of the Return ID that we
generate at the end of the process. Keep the item ready for pick
up or ship it to us basis on the return mode.
);
}
================================================
FILE: example/storybook/stories/components/composites/Modal/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as ModalWithAvoidKeyboard } from './ModalWithAvoidKeyboard';
import { Example as ModalRefEg } from './ModalRefEg';
import { Example as MultipleModal } from './MultipleModal';
import { Example as Size } from './Size';
import { Example as ModalPlacement } from './ModalPlacement';
import { Example as CustomBackdrop } from './CustomBackdrop';
storiesOf('Modal', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Multiple modal', () => )
.add('Modal Ref Examples', () => )
.add('Modal Placement', () => )
.add('Modal with Keyboard Avoid view', () => )
.add('Modal Size Examples', () => )
.add('Modal Custom Backdrop', () => );
================================================
FILE: example/storybook/stories/components/composites/NumberInput/Combination.tsx
================================================
import React from 'react';
import {
Stack,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
Slider,
} from 'native-base';
export const Example = () => {
const [value, setValue] = React.useState(20);
return (
setValue(v)}
>
{
setValue(Math.floor(v));
}}
>
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/DefaultValue.tsx
================================================
import React from 'react';
import {
Stack,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/FormControlled.tsx
================================================
import React from 'react';
import {
Stack,
FormControl,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
export const Example = () => {
return (
How many components we haveYou can make a guess.
Don't worry, it's just an example.
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/MinMax.tsx
================================================
import React from 'react';
import {
Stack,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/Playground.tsx
================================================
import React from 'react';
import {
Stack,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
import { boolean, number, text } from '@storybook/addon-knobs';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/Steps.tsx
================================================
import React from 'react';
import {
Stack,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/Usage.tsx
================================================
import React from 'react';
import {
Stack,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/NumberInput/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Usage from './Usage';
import FormControlled from './FormControlled';
import Steps from './Steps';
import DefaultValue from './DefaultValue';
import Playground from './Playground';
// import Combination from './Combination';
import MinMax from './MinMax';
storiesOf('NumberInput', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => )
.add('DefaultValue', () => )
.add('MinMax', () => )
.add('Steps', () => )
.add('FormControlled', () => );
// .add('Combination', () => );
================================================
FILE: example/storybook/stories/components/composites/PinInput/DefaultValue.tsx
================================================
import React from 'react';
import { PinInput, Stack } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/FormControlled.tsx
================================================
import React from 'react';
import { PinInput, Center, FormControl } from 'native-base';
export const Example = () => {
return (
OTP
An otp is send to number ending with +91-XXXXX-XX007.
Please Retry.
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/ManageFocus.tsx
================================================
import React from 'react';
import { PinInput } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/Placeholder.tsx
================================================
import React from 'react';
import { PinInput } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/Playground.tsx
================================================
import React from 'react';
import { PinInput } from 'native-base';
import { select, text } from '@storybook/addon-knobs';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/Size.tsx
================================================
import React from 'react';
import { PinInput, Stack } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/Usage.tsx
================================================
import React from 'react';
import { PinInput } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/Variants.tsx
================================================
import React from 'react';
import { PinInput, Stack } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/PinInput/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Usage from './Usage';
import ManageFocus from './ManageFocus';
import DefaultValue from './DefaultValue';
import Size from './Size';
import Playground from './Playground';
import Variants from './Variants';
import FormControlled from './FormControlled';
import Placeholder from './Placeholder';
storiesOf('PinInput', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Playground', () => )
.add('Usage', () => )
.add('Size', () => )
.add('DefaultValue', () => )
.add('Placeholder', () => )
.add('ManageFocus', () => )
.add('Variants', () => )
.add('FormControlled', () => );
================================================
FILE: example/storybook/stories/components/composites/Popover/Basic.tsx
================================================
import React from 'react';
import { Popover, Button, Box } from 'native-base';
export function Example() {
return (
{
return (
);
}}
>
Delete Customer
This will remove all data relating to Alex. This action cannot be
reversed. Deleted data can not be recovered.
);
}
================================================
FILE: example/storybook/stories/components/composites/Popover/PopoverPositions.tsx
================================================
import React, { useState } from 'react';
import { Popover, Button, VStack, Select, CheckIcon, Box } from 'native-base';
export function Example() {
const [position, setPosition] = useState('auto');
const [isOpen, setIsOpen] = useState(false);
return (
{
return (
);
}}
isOpen={isOpen}
onClose={() => setIsOpen(!isOpen)}
>
setIsOpen(false)} />
Delete Customer
This will remove all data relating to Alex. This action cannot be
reversed. Deleted data can not be recovered.
);
}
================================================
FILE: example/storybook/stories/components/composites/Popover/RefEg.tsx
================================================
import React from 'react';
import { Popover, Button, Input, FormControl, Box } from 'native-base';
export function Example() {
const initialFocusRef = React.useRef(null);
return (
{
return ;
}}
>
{/* @ts-ignore */}
Personal Details
First Name
Last Name
);
}
================================================
FILE: example/storybook/stories/components/composites/Popover/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as RefEg } from './RefEg';
import { Example as PopoverPositions } from './PopoverPositions';
storiesOf('Popover', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Popover positions', () => )
.add('Basic', () => )
.add('Focus on Open', () => );
================================================
FILE: example/storybook/stories/components/composites/Progress/Basic.tsx
================================================
import React from 'react';
import { Box, Progress, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Progress/ColorScheme.tsx
================================================
import React from 'react';
import { Box, Progress, VStack, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Progress/Composition.tsx
================================================
import React from 'react';
import { Box, Progress, Center, Heading, Text, Flex } from 'native-base';
export const Example = () => {
return (
Progress Composition
75%
);
};
================================================
FILE: example/storybook/stories/components/composites/Progress/CustomBgColor.tsx
================================================
import React from 'react';
import { Box, Progress, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Progress/Flat.tsx
================================================
import React from 'react';
import { Box, Progress, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Progress/Sizes.tsx
================================================
import React from 'react';
import { Box, Progress, VStack, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Progress/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Composition } from './Composition';
import { Example as Basic } from './Basic';
import { Example as Flat } from './Flat';
import { Example as Size } from './Sizes';
import { Example as CustomBgColor } from './CustomBgColor';
import { Example as ColorScheme } from './ColorScheme';
storiesOf('Progress', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Default Progress Bar', () => )
.add('ColorSchemes', () => )
.add('Flat', () => )
.add('Sizes', () => )
.add('CustomBgColor', () => )
.add('Composition', () => );
================================================
FILE: example/storybook/stories/components/composites/SimpleGrid/MinWidthColumns.tsx
================================================
import { SimpleGrid, Box } from 'native-base';
import React from 'react';
const items = 12;
const data = Array(items).fill(0);
export default function MinChildWidthSimpleGrid() {
return (
{data.map((_item, index) => {
return ;
})}
);
}
================================================
FILE: example/storybook/stories/components/composites/SimpleGrid/NumberOfColumns.tsx
================================================
import { SimpleGrid, Center } from 'native-base';
import React from 'react';
const items = 12;
const data = Array(items).fill(0);
export default function NumberOfColumnsSimpleGrid() {
return (
{data.map((_item, index) => {
return (
);
})}
);
}
================================================
FILE: example/storybook/stories/components/composites/SimpleGrid/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import NumberOfColumnsSimpleGrid from './NumberOfColumns';
import MinChildWidthSimpleGrid from './MinWidthColumns';
storiesOf('SimpleGrid', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Using columns', () => )
.add('Using minChildWidth', () => );
================================================
FILE: example/storybook/stories/components/composites/Skeleton/Basic.tsx
================================================
import React from 'react';
import { Skeleton, VStack, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Skeleton/Color.tsx
================================================
import React from 'react';
import { Skeleton, VStack, HStack, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Skeleton/Composition.tsx
================================================
import React from 'react';
import { Skeleton, VStack, HStack, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Skeleton/FadeDuration.tsx
================================================
import React from 'react';
import { Skeleton, Stack } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Skeleton/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Color } from './Color';
import { Example as Composition } from './Composition';
import { Example as IsLoaded } from './isLoaded';
import { Example as FadeDuration } from './FadeDuration';
storiesOf('Skeleton', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Color', () => )
.add('Composition', () => )
.add('FadeDuration', () => )
.add('isLoaded', () => );
================================================
FILE: example/storybook/stories/components/composites/Skeleton/isLoaded.tsx
================================================
import React, { useState } from 'react';
import {
Skeleton,
Text,
Button,
Box,
Image,
VStack,
Center,
} from 'native-base';
export const Example = () => {
const [isLoaded, setIsLoaded] = useState(false);
const [text, setText] = useState('');
setTimeout(() => {
setIsLoaded(true);
setText(
'Lose yourself in the greens of nature, the ones that make you strong. Come visit us at the Greenway Park, and we will be happy to show you around.'
);
}, 5000);
return (
{text}
);
};
================================================
FILE: example/storybook/stories/components/composites/Stat/Example.tsx
================================================
import React from 'react';
import { Stat, Heading, Box } from 'native-base';
export const Example = () => {
return (
Basic Stat UsageAmount£126.00Feb 12 - Feb 28
);
};
================================================
FILE: example/storybook/stories/components/composites/Stat/Indicator.tsx
================================================
import React from 'react';
import { Stat, Heading, Box } from 'native-base';
export const Example = () => {
return (
Stat with IndicatorSent$3600
56.67%
Received$454
99.56%
);
};
================================================
FILE: example/storybook/stories/components/composites/Stat/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Example from './Example';
import Indicator from './Indicator';
storiesOf('Stat', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Default Stat', () => )
.add('Stat with Indicator', () => );
================================================
FILE: example/storybook/stories/components/composites/Tabs/Colors.tsx
================================================
import React from 'react';
import { VStack, Tabs } from 'native-base';
export const Example = () => {
return (
OneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThree
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/Composition.tsx
================================================
import React from 'react';
import { Box, Tabs, Text } from 'native-base';
export const Example = () => {
return (
OneTwoThreeOneTwoThreeTo show how tabs behaves around other components.
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/Controlled.tsx
================================================
import React from 'react';
import { Tabs, Text } from 'native-base';
export const Example = () => {
const [index, setIndex] = React.useState(0);
return (
OneTwoThreeOneTwoThree
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/FittedTab.tsx
================================================
import React from 'react';
import { Tabs, Box } from 'native-base';
export const Example = () => {
return (
OneTwoThreeFour
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/IconTabs.tsx
================================================
import React from 'react';
import { Box, Tabs } from 'native-base';
export const Example = () => {
return (
Home
Bookmarks
Camera
HomeBookmarksCamera
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/Size.tsx
================================================
import React from 'react';
import { VStack, Tabs } from 'native-base';
export const Example = () => {
return (
{/* Small Tabs */}
OneTwoThreeOneTwoThree
{/* Medium Tabs (default) */}
OneTwoThreeOneTwoThree
{/* Large Tabs (default) */}
OneTwoThreeOneTwoThree
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/TabAlignment.tsx
================================================
import React from 'react';
import { VStack, Tabs } from 'native-base';
export const Example = () => {
return (
OneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThree
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/TabBarOnly.tsx
================================================
import React from 'react';
import { Tabs } from 'native-base';
export const Example = () => {
return (
OneTwoThree
{/* Four */}
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/Usage.tsx
================================================
import React from 'react';
import { Tabs } from 'native-base';
export const Example = () => {
return (
TAB ONETAB TWOOneTwo
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/Variants.tsx
================================================
import React from 'react';
import { VStack, Tabs } from 'native-base';
export const Example = () => {
return (
OneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThreeOneTwoThree
);
};
================================================
FILE: example/storybook/stories/components/composites/Tabs/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as Usage } from './Usage';
import { Example as Controlled } from './Controlled';
import { Example as TabBarOnly } from './TabBarOnly';
import { Example as FittedTab } from './FittedTab';
import { Example as TabAlignment } from './TabAlignment';
import { Example as IconTabs } from './IconTabs';
import { Example as Size } from './Size';
import { Example as Colors } from './Colors';
import { Example as Composition } from './Composition';
import { Example as Variants } from './Variants';
storiesOf('Tabs', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Colors', () => )
.add('Size', () => )
.add('Variants', () => )
.add('IconTabs', () => )
.add('Tab Alignment', () => )
.add('Fitted Tab', () => )
.add('Controlled', () => )
.add('TabBarOnly', () => )
.add('Composition', () => );
================================================
FILE: example/storybook/stories/components/composites/Tag/Basic.tsx
================================================
import React from 'react';
import { Tag } from 'native-base';
export const Example = () => {
return NativeBase;
};
================================================
FILE: example/storybook/stories/components/composites/Tag/Custom.tsx
================================================
import React from 'react';
import { Tag, Avatar } from 'native-base';
export const Example = () => {
return (
Nativebase
);
};
================================================
FILE: example/storybook/stories/components/composites/Tag/Size.tsx
================================================
import React from 'react';
import { Tag, HStack } from 'native-base';
export const Example = () => {
return (
{['sm', 'md', 'lg'].map((size) => (
NativeBase
))}
);
};
================================================
FILE: example/storybook/stories/components/composites/Tag/Variants.tsx
================================================
import React from 'react';
import { Tag, HStack } from 'native-base';
export const Example = () => {
return (
{['solid', 'subtle', 'outline'].map((variant: any) => (
NativeBase
))}
);
};
================================================
FILE: example/storybook/stories/components/composites/Tag/WithIcon.tsx
================================================
import React from 'react';
import { Tag, Icon } from 'native-base';
import { MaterialIcons } from '@expo/vector-icons';
export const Example = () => {
return (
Menu
);
};
================================================
FILE: example/storybook/stories/components/composites/Tag/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import Basic from './Basic';
import Size from './Size';
import Variants from './Variants';
import WithIcon from './WithIcon';
import Custom from './Custom';
storiesOf('Tag', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Variants', () => )
.add('Sizes', () => )
.add('WithIcon', () => )
.add('Custom Tag', () => );
================================================
FILE: example/storybook/stories/components/composites/TextField/Basic.tsx
================================================
import React from 'react';
import { TextField } from 'native-base';
export const Example = () => {
return ;
};
================================================
FILE: example/storybook/stories/components/composites/TextField/Invalid.tsx
================================================
import React from 'react';
import { Stack, TextField, Button } from 'native-base';
export const Example = () => {
const [isInvalid, setIsInvalid] = React.useState(false);
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/TextField/Select.tsx
================================================
import React from 'react';
import { TextField, Select } from 'native-base';
export const Example = () => {
let [language, setLanguage] = React.useState('');
return (
setLanguage(itemValue)}
helperText="Sample helper text"
errorMessage="Sample error message"
>
);
};
================================================
FILE: example/storybook/stories/components/composites/TextField/Textarea.tsx
================================================
import React from 'react';
import { Stack, TextField, Button } from 'native-base';
export const Example = () => {
const [isInvalid, setIsInvalid] = React.useState(false);
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/TextField/WithIcon.tsx
================================================
import React from 'react';
import { Stack, TextField, Button, Icon } from 'native-base';
export const Example = () => {
const [isInvalid, setIsInvalid] = React.useState(false);
return (
}
InputRightElement={
}
/>
);
};
================================================
FILE: example/storybook/stories/components/composites/TextField/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import Invalid from './Invalid';
import WithIcon from './WithIcon';
import Select from './Select';
import Textarea from './Textarea';
import Basic from './Basic';
storiesOf('TextField', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Textarea', () => )
.add('Select', () => )
.add('WithIcon', () => )
.add('Invalid', () => );
================================================
FILE: example/storybook/stories/components/composites/Toast/Basic.tsx
================================================
import React from 'react';
import { Button, useToast, Center } from 'native-base';
export const Example = () => {
const toast = useToast();
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/CloseToast.tsx
================================================
import React from 'react';
import { Button, useToast, Stack } from 'native-base';
export const Example = () => {
const toast = useToast();
const toastIdRef = React.useRef();
function close() {
if (toastIdRef.current) {
toast.close(toastIdRef.current);
}
}
function closeAll() {
toast.closeAll();
}
function addToast() {
toastIdRef.current = toast.show({
title: 'Hi, Nice to see you',
});
}
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/CustomComponent.tsx
================================================
import React from 'react';
import { Button, useToast, Box, Center } from 'native-base';
export const Example = () => {
const toast = useToast();
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/CustomComponentWithCustomId.tsx
================================================
import React from 'react';
import { Button, useToast, Box } from 'native-base';
export const Example = () => {
const toast = useToast();
const id = 'test-toast';
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/PreventDuplicate.tsx
================================================
import React from 'react';
import { Button, useToast, Center } from 'native-base';
export function Example() {
const toast = useToast();
const id = 'test-toast';
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Toast/StandaloneToast.tsx
================================================
import React from 'react';
import { Button, Toast, Center } from 'native-base';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/StatusRecipies.tsx
================================================
import React from 'react';
import {
Button,
useToast,
VStack,
HStack,
Text,
Center,
IconButton,
CloseIcon,
Alert,
} from 'native-base';
export const Example = () => {
const toast = useToast();
const ToastDetails = [
{
title: 'Account verified',
status: 'success',
description: 'Thanks for signing up with us.',
isClosable: true,
},
{
title: 'Something went wrong',
status: 'error',
description: 'Please create a support ticket from the support page',
},
{
title: 'Network connection restored',
status: 'info',
description:
'This is to inform you that your network connectivity is restored',
isClosable: true,
},
{
title: 'Invalid email address',
status: 'warning',
description: 'Please enter a valid email address',
},
];
const ToastAlert = ({
id,
status,
variant,
title,
description,
isClosable,
...rest
}: any) => (
{title}
{isClosable ? (
}
onPress={() => toast.close(id)}
/>
) : null}
{description}
);
return (
{ToastDetails.map((item, index) => (
))}
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/ToastPositions.tsx
================================================
import React from 'react';
import { Button, useToast, VStack, Center } from 'native-base';
export const Example = () => {
const toast = useToast();
return (
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/VariantRecipies.tsx
================================================
import React from 'react';
import {
Button,
useToast,
VStack,
HStack,
Text,
Center,
IconButton,
CloseIcon,
Alert,
} from 'native-base';
export const Example = () => {
const toast = useToast();
const ToastDetails = [
{
title: 'Account verified',
variant: 'solid',
description: 'Thanks for signing up with us.',
isClosable: true,
},
{
title: 'Something went wrong',
variant: 'subtle',
description: 'Please create a support ticket from the support page',
},
{
title: 'Network connection restored',
variant: 'left-accent',
description:
'This is to inform you that your network connectivity is restored',
isClosable: true,
},
{
title: 'Invalid email address',
variant: 'top-accent',
description: 'Please enter a valid email address',
},
{
title: 'Invalid email address',
variant: 'outline',
description: 'Please enter a valid email address',
},
];
const ToastAlert = ({
id,
status,
variant,
title,
description,
isClosable,
...rest
}: any) => (
{title}
{isClosable ? (
}
_icon={{
color: variant === 'solid' ? 'lightText' : 'darkText',
}}
onPress={() => toast.close(id)}
/>
) : null}
{description}
);
return (
{ToastDetails.map((item, index) => (
))}
);
};
================================================
FILE: example/storybook/stories/components/composites/Toast/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from '../../Wrapper';
import { Example as ToastPositions } from './ToastPositions';
import { Example as ToastVariants } from './VariantRecipies';
import { Example as Basic } from './Basic';
import { Example as CloseToast } from './CloseToast';
import { Example as CustomComponent } from './CustomComponent';
import { Example as CustomComponentWithCustomId } from './CustomComponentWithCustomId';
import { Example as PreventDuplicate } from './PreventDuplicate';
import { Example as ToastStatus } from './StatusRecipies';
import { Example as StandaloneToast } from './StandaloneToast';
storiesOf('Toast', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Toast Positions', () => )
.add('Custom Component', () => )
.add('Custom Component with custom Id', () => )
.add('CloseToast', () => )
.add('Prevent Duplicate', () => )
.add('Status Recipies', () => )
.add('Variants Recipies', () => )
.add('Toast Ref', () => );
================================================
FILE: example/storybook/stories/components/composites/Tooltip/Basic.tsx
================================================
import React from 'react';
import { Tooltip, Button, Center } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Tooltip/CustomTooltip.tsx
================================================
import React from 'react';
import { Tooltip, Button, Center } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/composites/Tooltip/TooltipPositions.tsx
================================================
import React from 'react';
import { Tooltip, Button, VStack, Select, CheckIcon } from 'native-base';
export function Example() {
const [position, setPosition] = React.useState('top left');
return (
{/* @ts-ignore */}
);
}
================================================
FILE: example/storybook/stories/components/composites/Tooltip/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as TooltipPositions } from './TooltipPositions';
import { Example as CustomTooltip } from './CustomTooltip';
storiesOf('Tooltip', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Tooltip Positions', () => )
.add('Customizing', () => );
================================================
FILE: example/storybook/stories/components/composites/Transitions/Fade.tsx
================================================
import React from 'react';
import { Button, Center, PresenceTransition } from 'native-base';
export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return (
Fade
);
};
================================================
FILE: example/storybook/stories/components/composites/Transitions/ScaleFade.tsx
================================================
import React from 'react';
import { PresenceTransition, Button, Center } from 'native-base';
export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return (
ScaleFade
);
};
================================================
FILE: example/storybook/stories/components/composites/Transitions/Slide.tsx
================================================
import React from 'react';
import {
Slide,
Button,
Alert,
Text,
useColorModeValue,
Center,
} from 'native-base';
export const Example = () => {
const [isOpenTop, setIsOpenTop] = React.useState(false);
const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;
return (
OrderSub Total$298.77Tax$38.84Total Amount$337.61Promo Code
Due to government restrictions around COVID- 19, you may experience
a delay in your delivery.
);
};
================================================
FILE: example/storybook/stories/components/composites/Transitions/SlideFade.tsx
================================================
import React from 'react';
import { PresenceTransition, Box, Button, Center } from 'native-base';
export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return (
SlideFade
);
};
================================================
FILE: example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx
================================================
import React from 'react';
import {
Slide,
Button,
Box,
Input,
Heading,
VStack,
HStack,
Text,
CheckIcon,
Center,
} from 'native-base';
export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return (
OrderSub Total$298.77Tax$38.84Total Amount$337.61Promo Code
Order Placed Successfully.
);
};
================================================
FILE: example/storybook/stories/components/composites/Transitions/Stagger.tsx
================================================
import React from 'react';
import {
Box,
useDisclose,
IconButton,
Stagger,
HStack,
Icon,
Center,
} from 'native-base';
import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
export const Example = () => {
const { isOpen, onToggle } = useDisclose();
return (
);
}
================================================
FILE: example/storybook/stories/components/primitives/Flex/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import { Example as Flex } from './basic';
import { Example as SpacerExample } from './spacer';
import Wrapper from './../../Wrapper';
storiesOf('Flex', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic Usage', () => )
.add('Spacer Example', () => );
================================================
FILE: example/storybook/stories/components/primitives/Flex/spacer.tsx
================================================
import React from 'react';
import { Flex, Spacer, Center } from 'native-base';
export const Example = () => {
return (
Box 1
Box 2
);
};
================================================
FILE: example/storybook/stories/components/primitives/HStack/basic.tsx
================================================
import React from 'react';
import { HStack, Center } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/primitives/HStack/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import { Example } from './basic';
import Wrapper from './../../Wrapper';
storiesOf('HStack', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => );
================================================
FILE: example/storybook/stories/components/primitives/Heading/Basic.tsx
================================================
import React from 'react';
import { Heading } from 'native-base';
export function Example() {
return I'm a Heading;
}
================================================
FILE: example/storybook/stories/components/primitives/Heading/Composition.tsx
================================================
import React from 'react';
import { Box, Text, Heading } from 'native-base';
export function Example() {
return (
Heading
Headings are used for rendering headlines. Heading composes Text so you
can use all the style props.
);
}
================================================
FILE: example/storybook/stories/components/primitives/Heading/OverridenStyle.tsx
================================================
import React from 'react';
import { Heading } from 'native-base';
export function Example() {
return (
How are you?
);
}
================================================
FILE: example/storybook/stories/components/primitives/Heading/Sizes.tsx
================================================
import React from 'react';
import { Heading, VStack } from 'native-base';
export function Example() {
return (
xssmmdlgxl2xl3xl4xl
);
}
================================================
FILE: example/storybook/stories/components/primitives/Heading/Truncate.tsx
================================================
import React from 'react';
import { Heading } from 'native-base';
export function Example() {
return (
NativeBase is a simple, modular and accessible component library that
gives you building blocks to build you React applications.
);
}
================================================
FILE: example/storybook/stories/components/primitives/Heading/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Sizes } from './Sizes';
import { Example as Truncate } from './Truncate';
import { Example as OverridenStyle } from './OverridenStyle';
import { Example as Composition } from './Composition';
storiesOf('Heading', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('Sizes', () => )
.add('Truncate', () => )
.add('OverridenStyle', () => )
.add('Composition', () => );
================================================
FILE: example/storybook/stories/components/primitives/Hidden/basic.tsx
================================================
import React from 'react';
import { Hidden, Text, Stack, Box } from 'native-base';
export function Example() {
return (
This text will be always visible.This text will be always hidden.
);
}
================================================
FILE: example/storybook/stories/components/primitives/Hidden/hiddenFromAndToBreakpoints.tsx
================================================
import React from 'react';
import { Hidden, Text, Stack, Box } from 'native-base';
export function Example() {
return (
This text will be always visible.This text will be hidden from sm to lg screens.This will be hidden from sm to all screen sizes.
);
}
================================================
FILE: example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx
================================================
import React from 'react';
import { Hidden, Button, Image, useColorMode, Center } from 'native-base';
export const Example = () => {
const { toggleColorMode } = useColorMode();
return (
);
};
================================================
FILE: example/storybook/stories/components/primitives/Hidden/hiddenOnPlatforms.tsx
================================================
import React from 'react';
import { Hidden, Text, Stack, Box } from 'native-base';
export function Example() {
return (
This text will be visible on every platform.This text will be hidden on android and web.
);
}
================================================
FILE: example/storybook/stories/components/primitives/Hidden/hiddenOnlyOnBreakPoints.tsx
================================================
import React from 'react';
import { Hidden, Text, Stack, Box } from 'native-base';
export function Example() {
return (
This text will be visible on every screen size.This text will be hidden on sm and lg only.
);
}
================================================
FILE: example/storybook/stories/components/primitives/Hidden/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './basic';
import { Example as HiddenFromAndToBreakpoints } from './hiddenFromAndToBreakpoints';
import { Example as HiddenOnColorModes } from './hiddenOnColorModes';
import { Example as HiddenOnlyOnBreakPoints } from './hiddenOnlyOnBreakPoints';
import { Example as HiddenOnPlatforms } from './hiddenOnPlatforms';
storiesOf('Hidden', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('Basic', () => )
.add('HiddenOnColorModes', () => )
.add('HiddenFromAndToBreakpoints', () => )
.add('HiddenOnlyOnBreakPoints', () => )
.add('HiddenOnPlatforms', () => );
================================================
FILE: example/storybook/stories/components/primitives/Icon/AllIcons.tsx
================================================
import React from 'react';
import {
Box,
Text,
MoonIcon,
SunIcon,
CheckIcon,
CircleIcon,
ArrowBackIcon,
AddIcon,
ArrowForwardIcon,
ArrowUpIcon,
ArrowDownIcon,
CheckCircleIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronUpIcon,
CloseIcon,
SmallCloseIcon,
HamburgerIcon,
InfoIcon,
InfoOutlineIcon,
MinusIcon,
QuestionIcon,
QuestionOutlineIcon,
SearchIcon,
WarningIcon,
WarningTwoIcon,
ThreeDotsIcon,
WarningOutlineIcon,
ShareIcon,
PlayIcon,
FavouriteIcon,
DeleteIcon,
VStack,
FlatList,
useBreakpointValue,
} from 'native-base';
export const Example = () => {
const cols = useBreakpointValue({
base: 3,
sm: 4,
md: 8,
});
const icons = [
{
icon: ,
iconName: 'add',
},
{
icon: ,
iconName: 'arrow-back',
},
{
icon: ,
iconName: 'arrow-forward',
},
{
icon: ,
iconName: 'arrow-up',
},
{
icon: ,
iconName: 'arrow-down',
},
{
icon: ,
iconName: 'check',
},
{
icon: ,
iconName: 'check-circle',
},
{
icon: ,
iconName: 'chevron-down',
},
{
icon: ,
iconName: 'chevron-left',
},
{
icon: ,
iconName: 'chevron-right',
},
{
icon: ,
iconName: 'chevron-up',
},
{
icon: ,
iconName: 'circle',
},
{
icon: ,
iconName: 'close',
},
{
icon: ,
iconName: 'small-close',
},
{
icon: ,
iconName: 'menu',
},
{
icon: ,
iconName: 'info',
},
{
icon: ,
iconName: 'info-outline',
},
{
icon: ,
iconName: 'minus',
},
{
icon: ,
iconName: 'moon',
},
{
icon: ,
iconName: 'question',
},
{
icon: ,
iconName: 'question-outline',
},
{
icon: ,
iconName: 'search',
},
{
icon: ,
iconName: 'sun',
},
{
icon: ,
iconName: 'warning-1',
},
{
icon: ,
iconName: 'warning-2',
},
{
icon: ,
iconName: 'warning-outline',
},
{
icon: ,
iconName: 'three-dots',
},
{
icon: ,
iconName: 'share',
},
{
icon: ,
iconName: 'play',
},
{
icon: ,
iconName: 'favourite',
},
{
icon: ,
iconName: 'delete',
},
];
return (
(
{item.icon}{item.iconName}
)}
keyExtractor={(item) => item.iconName}
numColumns={cols}
/>
);
};
================================================
FILE: example/storybook/stories/components/primitives/Icon/Basic.tsx
================================================
import React from 'react';
import { CheckIcon, HStack, Text } from 'native-base';
export const Example = () => {
return (
Order Placed Successfully
);
};
================================================
FILE: example/storybook/stories/components/primitives/Icon/CreateIcon.tsx
================================================
import React from 'react';
import { createIcon } from 'native-base';
import { Circle as CircleSvg } from 'react-native-svg';
export const Example = () => {
const CustomIcon = createIcon({
viewBox: '0 0 36 36',
// d: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
path: [
,
,
,
,
],
});
return ;
};
================================================
FILE: example/storybook/stories/components/primitives/Icon/CustomIcon.tsx
================================================
import React from 'react';
import { Icon, Center } from 'native-base';
import { Path, G } from 'react-native-svg';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/primitives/Icon/Sizes.tsx
================================================
import React from 'react';
import { Icon, Heading, Center, VStack } from 'native-base';
import { Ionicons } from '@expo/vector-icons';
export const Example = () => {
const sizes = ['10', '50px', '2xl'];
return (
Sizes
{sizes.map((size) => (
))}
);
};
================================================
FILE: example/storybook/stories/components/primitives/Icon/ThirdPartyIcons.tsx
================================================
import React from 'react';
import { Icon, Center, HStack } from 'native-base';
import { MaterialCommunityIcons, AntDesign, Entypo } from '@expo/vector-icons';
export const Example = () => {
return (
);
};
================================================
FILE: example/storybook/stories/components/primitives/Icon/index.tsx
================================================
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import Wrapper from './../../Wrapper';
import { Example as Basic } from './Basic';
import { Example as Sizes } from './Sizes';
import { Example as AllIcons } from './AllIcons';
import { Example as CustomIcon } from './CustomIcon';
import { Example as CreateIcon } from './CreateIcon';
import { Example as ThirdPartyIcons } from './ThirdPartyIcons';
storiesOf('Icon', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => {getStory()})
.add('All Icons', () => )
.add('Basic', () => )
.add('Sizes', () => )
.add('CustomIcon', () => )
.add('CreateIcon', () => )
.add('Integration with Third Party Icons', () => );
================================================
FILE: example/storybook/stories/components/primitives/Image/Basic.tsx
================================================
import React from 'react';
import { Center, Image } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/primitives/Image/BorderRadius.tsx
================================================
import React from 'react';
import { Image, Center } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/primitives/Image/FallbackElement.tsx
================================================
import React from 'react';
import { Image, Box, Center } from 'native-base';
export function Example() {
return (
This is a box
}
/>
);
}
================================================
FILE: example/storybook/stories/components/primitives/Image/FallbackSupport.tsx
================================================
import React from 'react';
import { Image, Center } from 'native-base';
export function Example() {
return (
);
}
================================================
FILE: example/storybook/stories/components/primitives/Image/Sizes.tsx
================================================
import React from 'react';
import { VStack, Image, ScrollView, Heading } from 'native-base';
export function Example() {
return (
<>
Image Sizes
{/*
[](https://opencollective.com/NativeBase)
[](https://discord.com/invite/TSgCw2UPmb)
[](https://www.npmjs.com/package/native-base)
[](https://www.npmjs.com/package/native-base)
[](https://npm-stat.com/charts.html?package=native-base)
[](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE)
[](https://twitter.com/nativebase)
[](https://img.shields.io/github/stars/GeekyAnts/NativeBase)
## NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web.
[**Website**](https://nativebase.io/)
### **Supporting Utility Props**
Powered by [Styled System](https://styled-system.com) so you can rapidly build custom UI components with constraint-based utility style props.
### **Rich Component Library**
NativeBase offers around 40 components so you can build seamlessly. It includes button, checkbox, flex, stack and more.
### **Highly Themeable**
Themeability is one of the core elements of NativeBase. You can customise your app theme and component styles to your heart's content.
### **Available for Both Mobile and Web**
NativeBase 3.0 is powered by React Native Web so you can build consistent UIs across Web, Android and iOS.
### **Responsiveness Made Easy**
Instead of manually adding responsiveness, NativeBase 3.0 allows you to provide object and array values to add responsive styles.
### **Now with** **Dark Mode**
Building apps with a dark mode setting just got a whole lot easier. NativeBase is now optimised for light and dark modes.
## 4. Dependencies
React Native, Expo
## 5. Installation
NativeBase is supported in Expo or React Native CLI initiated apps. Web support is made possible by react-native-web.
Refer the [guides](https://docs.nativebase.io/installation) to setup NativeBase in your React app.
## 6. Components
NativeBase 3.0 is a rich component library with nearly 40 components.
- [**Layout**](https://docs.nativebase.io/box)
- [**Forms**](https://docs.nativebase.io/button)
- [**Data Display**](https://docs.nativebase.io/badge)
- [**Feedback**](https://docs.nativebase.io/alert)
- [**Typography**](https://docs.nativebase.io/text)
- [**Overlay** ](https://docs.nativebase.io/alert-dialog)
- [**Disclosure**](https://docs.nativebase.io/action-sheet)
- [**Media & Icons**](https://docs.nativebase.io/avatar)
- [**Transition**](https://docs.nativebase.io/presence-transition)
- [**Other**](https://docs.nativebase.io/fab)
## 7. Examples
[Check out the Todo-List example](https://docs.nativebase.io/todo-list)
## 8. KitchenSink App
[Kitchen Sink](https://kitchensink.nativebase.io/) is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons, etc.
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/NativeBase/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/NativeBase/contribute)]
## 12. Changelog
[Check out the changelog in the official documentation](https://docs.nativebase.io/changelog)
## 13. Community
- [Facebook](https://www.facebook.com/nativebaseio)
- [Twitter](https://twitter.com/nativebase)
- [Discord](https://discord.com/invite/TSgCw2UPmb)
- [Stackoverflow](https://stackoverflow.com/questions/tagged/native-base)
- [Blog](https://nativebase.io/blogs)
- [YouTube](https://www.youtube.com/channel/UCoL_iTwpY07vDs91974z3xA/about)
## 14. License
Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE) for more information.
Built with ❤️ by [GeekyAnts](https://geekyants.com?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) |
[React Native Experts](https://geekyants.com/hire-react-native-developers?utm_source=github&utm_medium=opensource&utm_campaign=nativebase)
================================================
FILE: RNBareExample/.buckconfig
================================================
[android]
target = Google Inc.:Google APIs:23
[maven_repositories]
central = https://repo1.maven.org/maven2
================================================
FILE: RNBareExample/.eslintrc.js
================================================
module.exports = {
root: true,
extends: '@react-native-community',
};
================================================
FILE: RNBareExample/.gitattributes
================================================
# Windows files should use crlf line endings
# https://help.github.com/articles/dealing-with-line-endings/
*.bat text eol=crlf
================================================
FILE: RNBareExample/.gitignore
================================================
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
# node.js
#
node_modules/
npm-debug.log
yarn-error.log
# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore
# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots
# Bundle artifact
*.jsbundle
# CocoaPods
/ios/Pods/
================================================
FILE: RNBareExample/.prettierrc.js
================================================
module.exports = {
bracketSpacing: false,
jsxBracketSameLine: true,
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
};
================================================
FILE: RNBareExample/.watchmanconfig
================================================
{}
================================================
FILE: RNBareExample/App.tsx
================================================
import React from 'react';
import {NativeBaseProvider, Box, Center} from 'native-base';
const config = {
dependencies: {
'linear-gradient': require('react-native-linear-gradient').default,
},
};
const App = () => {
return (