:package: Android Native Kit for React-Native

Overview

React Native Android Kit
npm version react-native version


A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Native developers some new Android native components that are currently not implemented by React Native core team. For example, some components from Android Design Support Library are now available through this kit.


Table of Contents




Installation


Automatic

  • Go to your root project folder

  • Install react-native-android-kit from npm repository:

     npm install react-native-android-kit --save
    
  • Link native dependencies to your project:

     node node_modules/react-native/local-cli/cli.js link react-native-android-kit
    

    Or, via react-native-cli if installed globally:

     react-native link react-native-android-kit
    

Manual

To use this kit inside your react native project, you must follow these steps:

  • Go to your root project folder

  • Install react-native-android-kit from npm repository:

     npm install react-native-android-kit --save
    
  • Add the following lines to your android/settings.gradle:

     include ':ReactNativeAndroidKit'
     project(':ReactNativeAndroidKit').projectDir = file('../node_modules/react-native-android-kit/android')
  • Inside android/app/build.gradle file, add compilation instruction for ReactNativeAndroidKit like that:

     dependencies {
     	...
     	compile project(':ReactNativeAndroidKit')			
     }
  • Finally, edit MainApplication class (generally located at android/app/src/main/java/<main-package-path>/MainApplication.java):

     ...
    
     import com.facebook.react.ReactPackage;
     import com.facebook.react.shell.MainReactPackage;
     import fr.aybadb.rnak.RNAKPackage;	//<------------------------- Add this import statement
    
     ...
    
     public class MainApplication extends Application implements ReactApplication {
     	
     	...
    
     		@Override
     		protected List<ReactPackage> getPackages() {
     			return Arrays.<ReactPackage>asList(
     				new MainReactPackage(),
     				new RNAKPackage()	//<-------------------------- Add this statement
     			);
     		}
     	};
     
     ...





Components


TabLayoutAndroid

Introduction

TabLayoutAndroid component provides a horizontal layout to display tabs. Population of the tabs to display is done through TabLayoutAndroid.Item component. Transition between tabs are managed by a ViewPager instance (you don't need to care about it: all is managed by TabLayoutAndroid component).
For more details, see: Native TabLayout documentation

Props:

TabLayoutAndroid props:

It is important all children of TabLayoutAndroid are TabLayoutAndroid.Item component(s) and not composite components:

View props...

ViewPagerAndroid props...

backgroundColor color optional
Sets the background color for TabLayout container.

indicatorTabColor color optional
Sets the tab indicator's color for the currently selected tab.

indicatorTabHeight number optional
Sets the tab indicator's height for the currently selected tab.

scrollable boolean optional, default = true
Set the behavior mode for the Tabs in this layout:
true = SCROLLABLE tabs mode.
false = FIXED tabs mode.

backgroundImage string optional
Set the background's TabLayout to a given Drawable (see Drawable).

center boolean optional, default = true
Set the gravity to use when laying out the tabs:
true = CENTER tabs gravity (only takes effect if you are on FIXED tabs Mode).
false = FILL tabs gravity.

By default, 60 is the height value for tabs container.

TabLayoutAndroid.Item props:

TabLayoutAndroid.Item represents a child for TabLayoutAndroid (i.e a tab instance). Especially, it's a container that allows you to store child view(s) for current tab instance. In a nutshell, it works like a container but for TabLayoutAndroid.

Besides, each TabLayoutAndroid.Item can be customized by several properties:

View props...

text string optional
Sets the tab label.

icon string optional
Sets the tab icon (see Drawable).

iconPosition string optional, default = 'top' [only, if customView prop === true]
Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text.
Allowed values: left, top, right, bottom (if wrong string, top value is set by default).

textSize number optional [only, if customView prop === true]
Set the default text size to the given value, interpreted as "scaled pixel" unit (sp unit).

textColor color optional [only, if customView prop === true]
Sets the text color for the normal state.

selectedTextColor color optional [only, if customView prop === true]
Sets the text color for the selected state.

customView boolean optional, default = true
Sets custom view behavior for current tab.
true = Custom View enabled.
false = Custom View disabled: only, text and icon properties take effect.

Example

Basic Usage:
import React, { AppRegistry, StyleSheet, Text, View } from "react-native";
import { TabLayoutAndroid } from "react-native-android-kit";

class TabLayoutExample extends React.Component {
	render() {
		return (
			<View style={{flex:1}}>
			
				<TabLayoutAndroid style={{height:60}} backgroundColor='#009688' indicatorTabColor='#ffc400'
								  indicatorTabHeight={2} scrollable={false} center={false}>

					<TabLayoutAndroid.Item text='Tab1' textSize={16} textColor="white" selectedTextColor='#ffc400'
								icon='ic_home_black_24dp' iconPosition='left'>
						
						<Text>I'm the first Tab content!</Text>
						
					</TabLayoutAndroid.Item>
					
					<TabLayoutAndroid.Item text='Tab2' textSize={16} textColor='white' selectedTextColor='#ffc400'
								icon='ic_important_devices_black_24dp' iconPosition='left'>
						
						<Text>I'm the second Tab content!</Text>
						
					</TabLayoutAndroid.Item>

				</TabLayoutAndroid>
				
			</View>
		);
	}
}
Demonstration:

TabLayoutAndroid & TabLayoutAndroid.Item

*For corresponding code, see [Code from demonstration application](example/src/index.js)*




ButtonAndroid

Important Note: Since 0.37 react-native release, you can use <Button /> as a cross native component between Android and iOS. I recommend you to use it instead of this <ButtonAndroid /> component.

Introduction

Represents a push-button widget. Push-buttons can be pressed, or clicked, by the user to perform an action.
For more details, see: Native Button documentation

Props:

View props...

TouchableWithoutFeedback props...

text string optional
Sets the button label.

textSize number optional, default = 15
Set the default text size to the given value, interpreted as "scaled pixel" unit (sp unit).

textColor color optional, default = 'black'
Sets the text color.

backgroundColor color optional
Sets the background color.

Example

Basic Usage:
import React, { StyleSheet, View, ToastAndroid } from "react-native";
import { ButtonAndroid } from "react-native-android-kit";

class ButtonExample extends React.Component {
	render() {
		return (
			<View style={{flex:1}}>
				<ButtonAndroid
					textColor='red'
					backgroundColor='#FF009688'
					textSize={12}
					text='Custom Button'
					onPress={
						() => {
							ToastAndroid.show("Event onPress", ToastAndroid.SHORT);
						}
					}
				/>
			</View>
		);
	}
}
Demonstration:

ButtonAndroid

For corresponding code, see Code from demonstration application




FloatingButtonAndroid

Introduction

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI.
For more details, see: Native FloatingActionButton documentation

Props:

View props...

TouchableWithoutFeedback props...

icon string optional
Sets the button icon (see Drawable).

backgroundColor color optional
Sets the background color.

rippleColor color optional
Sets the ripple color.

hidden boolean optional, default = false
Hides/Shows the button:
true = Hides the button.
false = Shows the button.

rippleEffect boolean optional, default = true
Defines whether this view reacts to click by a ripple effect or not:
true = Ripple effect enabled.
false = Ripple effect disabled.

Example:

Basic Usage:
import React, { StyleSheet, View, ToastAndroid } from "react-native";
import { FloatingButtonAndroid } from "react-native-android-kit";

class FloatingButtonExample extends React.Component {
	render() {
		return (
			<View style={{flex:1}}>
				<FloatingButtonAndroid
					style={[styles.fab,{height:100, width:100}]}
					backgroundColor='#ffff0000'
					rippleColor='black'
					icon='ic_reply_all_black_24dp'
					onPress={
						() => {
							ToastAndroid.show("Event onPress", ToastAndroid.SHORT);
						}
					}
				/>
			</View>
		);
	}
}
Demonstration:

FloatingButtonAndroid

For corresponding code, see Code from demonstration application





Misc


Color

Color value property is set via a string input.
Supported formats are: '#RRGGBB' , '#AARRGGBB' or one of the following names: 'red', 'blue', 'green', 'black', 'white', 'gray', 'cyan', 'magenta', 'yellow', 'lightgray', 'darkgray', 'grey', 'lightgrey', 'darkgrey', 'aqua', 'fuchsia', 'lime', 'maroon', 'navy', 'olive', 'purple', 'silver', 'teal'.


Drawable

For now, only static images resources are supported. They must be located inside one of drawable folders (usually located at android/app/src/main/res/drawable or android/app/src/main/res/drawable-XXXXXX if you want to manage icon size according to display format).
To target a resource, you only need to specify string basename (i.e. without extension) and it must respect underscored name. For example, if you have an image called toto-tata.png, you must specify 'toto_tata' as a property value.


Demo

If you want an overview of RNAK, it's interesting to try the demonstration code located inside ./example folder.

To build and test this demo, just follow these steps:

  • Connect your device or launch your Android emulator
  • Clone this repository
  • Go to the example folder: cd ./example
  • Install npm dependencies, build and deploy the demonstration application by running: npm install
  • Enjoy RNAK demo on your device/emulator !

Todo

  • TabLayoutAndroid: Homogenize component props and naming with TabBarIOS react-native implementation
  • TabLayoutAndroid: Programmatically set the current active tab





License

MIT

Issues
  • Scrollable, indicatorHeight and indicatorColor not working

    Scrollable, indicatorHeight and indicatorColor not working

    Hey,

    First of all congratulations for this plugin, it saves me a lot of life. Unfortunately there is a problem attribute, the three are mentioned in the title. Thanks !

    opened by sineus 5
  • Typename checks on release

    Typename checks on release

    if(obj.type.name !== 'TabAndroid' || obj.type.__proto__.name !== 'Tab')

    When generating a release APK these checks do not pass and the control does not behave correctly

    waiting-for-user-information 
    opened by j-burgos 4
  • Dont you have upgrade this library components to latest react-native version?

    Dont you have upgrade this library components to latest react-native version?

    always shows an error in proptypes when i run this library to my latest react-native version i.e 0.26

    waiting-for-user-information 
    opened by susylPearl 3
  • fix for 0.38

    fix for 0.38

    opened by vonovak 3
  • Up-to-date please

    Up-to-date please

    react-native in 0.27 version.

    waiting-for-user-information 
    opened by heat 2
  • Build fails at 45% :react-native-android-kit:compileReleaseJavaWithJavac

    Build fails at 45% :react-native-android-kit:compileReleaseJavaWithJavac

    I am trying to buil an apk to test on my phone and it fails.Can you help me figure this out? here's my log:

    cd android && ./gradlew :app:installDebug --stacktrace :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE :app:checkDebugManifest :app:preReleaseBuild UP-TO-DATE :react-native-android-kit:compileLint :react-native-android-kit:copyReleaseLint UP-TO-DATE :react-native-android-kit:preBuild UP-TO-DATE :react-native-android-kit:preReleaseBuild UP-TO-DATE :react-native-android-kit:checkReleaseManifest :react-native-android-kit:preDebugAndroidTestBuild UP-TO-DATE :react-native-android-kit:preDebugBuild UP-TO-DATE :react-native-android-kit:preDebugUnitTestBuild UP-TO-DATE :react-native-android-kit:preReleaseUnitTestBuild UP-TO-DATE :react-native-android-kit:prepareComAndroidSupportAnimatedVectorDrawable2340Library UP-TO-DATE :react-native-android-kit:prepareComAndroidSupportAppcompatV72340Library UP-TO-DATE :react-native-android-kit:prepareComAndroidSupportDesign2340Library UP-TO-DATE :react-native-android-kit:prepareComAndroidSupportRecyclerviewV72340Library UP-TO-DATE :react-native-android-kit:prepareComAndroidSupportSupportV42340Library UP-TO-DATE :react-native-android-kit:prepareComAndroidSupportSupportVectorDrawable2340Library UP-TO-DATE :react-native-android-kit:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE :react-native-android-kit:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE :react-native-android-kit:prepareComFacebookFrescoFresco0110Library UP-TO-DATE :react-native-android-kit:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE :react-native-android-kit:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE :react-native-android-kit:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE :react-native-android-kit:prepareComFacebookReactReactNative0320Library UP-TO-DATE :react-native-android-kit:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE :react-native-android-kit:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE :react-native-android-kit:prepareReleaseDependencies :react-native-android-kit:compileReleaseAidl UP-TO-DATE :react-native-android-kit:compileReleaseRenderscript UP-TO-DATE :react-native-android-kit:generateReleaseBuildConfig UP-TO-DATE :react-native-android-kit:generateReleaseAssets UP-TO-DATE :react-native-android-kit:mergeReleaseAssets UP-TO-DATE :react-native-android-kit:generateReleaseResValues UP-TO-DATE :react-native-android-kit:generateReleaseResources UP-TO-DATE :react-native-android-kit:mergeReleaseResources UP-TO-DATE :react-native-android-kit:processReleaseManifest UP-TO-DATE :react-native-android-kit:processReleaseResources UP-TO-DATE :react-native-android-kit:generateReleaseSources UP-TO-DATE :react-native-android-kit:processReleaseJavaRes UP-TO-DATE :react-native-android-kit:compileReleaseJavaWithJavac /Users/zehijeanjacquesthibaut/Desktop/TRIZ_DIGITAL/WEBAPPS_MOBILE_APPS/NSIA/NsiaVieMob/NsiaVieMobileApp/node_modules/react-native-android-kit/android/src/main/java/fr/ayoubdev/rnak/components/button/ButtonNode.java:10: error: ButtonNode is not abstract and does not override abstract method measure(CSSNodeAPI,float,CSSMeasureMode,float,CSSMeasureMode,MeasureOutput) in MeasureFunction public class ButtonNode extends LayoutShadowNode implements CSSNode.MeasureFunction { ^ /Users/zehijeanjacquesthibaut/Desktop/TRIZ_DIGITAL/WEBAPPS_MOBILE_APPS/NSIA/NsiaVieMob/NsiaVieMobileApp/node_modules/react-native-android-kit/android/src/main/java/fr/ayoubdev/rnak/components/button/ButtonNode.java:19: error: method does not override or implement a method from a supertype @Override ^ /Users/zehijeanjacquesthibaut/Desktop/TRIZ_DIGITAL/WEBAPPS_MOBILE_APPS/NSIA/NsiaVieMob/NsiaVieMobileApp/node_modules/react-native-android-kit/android/src/main/java/fr/ayoubdev/rnak/components/floatingbutton/FabNode.java:10: error: FabNode is not abstract and does not override abstract method measure(CSSNodeAPI,float,CSSMeasureMode,float,CSSMeasureMode,MeasureOutput) in MeasureFunction public class FabNode extends LayoutShadowNode implements CSSNode.MeasureFunction { ^ /Users/zehijeanjacquesthibaut/Desktop/TRIZ_DIGITAL/WEBAPPS_MOBILE_APPS/NSIA/NsiaVieMob/NsiaVieMobileApp/node_modules/react-native-android-kit/android/src/main/java/fr/ayoubdev/rnak/components/floatingbutton/FabNode.java:19: error: method does not override or implement a method from a supertype @Override ^ Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 4 errors :react-native-android-kit:compileReleaseJavaWithJavac FAILED

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':react-native-android-kit:compileReleaseJavaWithJavac'.

      Compilation failed; see the compiler error output for details.

    • Try: Run with --info or --debug option to get more log output.

    • Exception is: org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':react-native-android-kit:compileReleaseJavaWithJavac'. at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:69) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:46) at org.gradle.api.internal.tasks.execution.PostExecutionAnalysisTaskExecuter.execute(PostExecutionAnalysisTaskExecuter.java:35) at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:64) at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:58) at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:42) at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:52) at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:53) at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43) at org.gradle.api.internal.AbstractTask.executeWithoutThrowingTaskFailure(AbstractTask.java:310) at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.executeTask(AbstractTaskPlanExecutor.java:79) at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.processTask(AbstractTaskPlanExecutor.java:63) at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.run(AbstractTaskPlanExecutor.java:51) at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor.process(DefaultTaskPlanExecutor.java:23) at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter.execute(DefaultTaskGraphExecuter.java:88) at org.gradle.execution.SelectedTaskExecutionAction.execute(SelectedTaskExecutionAction.java:37) at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:62) at org.gradle.execution.DefaultBuildExecuter.access$200(DefaultBuildExecuter.java:23) at org.gradle.execution.DefaultBuildExecuter$2.proceed(DefaultBuildExecuter.java:68) at org.gradle.execution.DryRunBuildExecutionAction.execute(DryRunBuildExecutionAction.java:32) at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:62) at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:55) at org.gradle.initialization.DefaultGradleLauncher.doBuildStages(DefaultGradleLauncher.java:149) at org.gradle.initialization.DefaultGradleLauncher.doBuild(DefaultGradleLauncher.java:106) at org.gradle.initialization.DefaultGradleLauncher.run(DefaultGradleLauncher.java:86) at org.gradle.launcher.exec.InProcessBuildActionExecuter$DefaultBuildController.run(InProcessBuildActionExecuter.java:90) at org.gradle.tooling.internal.provider.ExecuteBuildActionRunner.run(ExecuteBuildActionRunner.java:28) at org.gradle.launcher.exec.ChainingBuildActionRunner.run(ChainingBuildActionRunner.java:35) at org.gradle.launcher.exec.InProcessBuildActionExecuter.execute(InProcessBuildActionExecuter.java:41) at org.gradle.launcher.exec.InProcessBuildActionExecuter.execute(InProcessBuildActionExecuter.java:28) at org.gradle.launcher.exec.DaemonUsageSuggestingBuildActionExecuter.execute(DaemonUsageSuggestingBuildActionExecuter.java:50) at org.gradle.launcher.exec.DaemonUsageSuggestingBuildActionExecuter.execute(DaemonUsageSuggestingBuildActionExecuter.java:27) at org.gradle.launcher.cli.RunBuildAction.run(RunBuildAction.java:40) at org.gradle.internal.Actions$RunnableActionAdapter.execute(Actions.java:169) at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:237) at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:210) at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:35) at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:24) at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:206) at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:169) at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:33) at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:22) at org.gradle.launcher.Main.doAction(Main.java:33) at org.gradle.launcher.bootstrap.EntryPoint.run(EntryPoint.java:45) at org.gradle.launcher.bootstrap.ProcessBootstrap.runNoExit(ProcessBootstrap.java:54) at org.gradle.launcher.bootstrap.ProcessBootstrap.run(ProcessBootstrap.java:35) at org.gradle.launcher.GradleMain.main(GradleMain.java:23) at org.gradle.wrapper.BootstrapMainStarter.start(BootstrapMainStarter.java:30) at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:127) at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61) Caused by: org.gradle.api.internal.tasks.compile.CompilationFailedException: Compilation failed; see the compiler error output for details. at org.gradle.api.internal.tasks.compile.JdkJavaCompiler.execute(JdkJavaCompiler.java:47) at org.gradle.api.internal.tasks.compile.JdkJavaCompiler.execute(JdkJavaCompiler.java:33) at org.gradle.api.internal.tasks.compile.NormalizingJavaCompiler.delegateAndHandleErrors(NormalizingJavaCompiler.java:101) at org.gradle.api.internal.tasks.compile.NormalizingJavaCompiler.execute(NormalizingJavaCompiler.java:50) at org.gradle.api.internal.tasks.compile.NormalizingJavaCompiler.execute(NormalizingJavaCompiler.java:36) at org.gradle.api.internal.tasks.compile.CleaningJavaCompilerSupport.execute(CleaningJavaCompilerSupport.java:34) at org.gradle.api.internal.tasks.compile.CleaningJavaCompilerSupport.execute(CleaningJavaCompilerSupport.java:25) at org.gradle.api.tasks.compile.JavaCompile.performCompilation(JavaCompile.java:157) at org.gradle.api.tasks.compile.JavaCompile.compile(JavaCompile.java:137) at org.gradle.api.tasks.compile.JavaCompile.compile(JavaCompile.java:91) at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:75) at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$IncrementalTaskAction.doExecute(AnnotationProcessingTaskFactory.java:243) at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.execute(AnnotationProcessingTaskFactory.java:219) at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$IncrementalTaskAction.execute(AnnotationProcessingTaskFactory.java:230) at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.execute(AnnotationProcessingTaskFactory.java:208) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:80) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:61) ... 49 more

    BUILD FAILED

    Total time: 39.625 secs

    opened by zjjt 2
  • Return children views instead of TabAndroid

    Return children views instead of TabAndroid

    Currently, TabAndroid components are being returned instead of the children that should be used by ViewPagerAndroid

    waiting-for-user-information 
    opened by j-burgos 2
  • Installed but button won't render

    Installed but button won't render

    I installed the module succesfully, there were no build errors. However when I try to render the button it doesn't work:

    // @flow
    
    import React, { Component } from 'react'
    import { StyleSheet, Text, View, ScrollView } from 'react-native'
    import { ButtonAndroid } from 'react-native-android-kit'
    
    type Props = {};
    export default class App extends Component<Props> {
        render() {
            return (
                <View style={styles.main}>
                    <ButtonAndroid text="Hello World" onPress={()=>alert('hi')} />
                </View>
            );
        }
    }
    
    const Gap = () => <View style={styles.gap} />
    
    const styles = StyleSheet.create({
        main: {
            flex: 1,
            backgroundColor: '#ecf0f1',
        }
    });
    
    
    opened by Noitidart 1
  • Remove deprecated `createJSModules` method

    Remove deprecated `createJSModules` method

    React Native v0.47 removes the createJSModules method. The library wasn't compiling due to this issue.

    opened by illright 1
  • BREAKING: update to RN 0.38

    BREAKING: update to RN 0.38

    • Merged UlfR
    • Updated Button and FAB to work with RN 0.38 (BREAKING)
    opened by rborn 1
  • ReactNativeAndroidKit now react-native-android-kit

    ReactNativeAndroidKit now react-native-android-kit

    When I did react-native link react-native-android-kit I saw that it didn't use ReactNativeAndroidKit, instead it used react-native-android-kit, as seen in changed files.

    opened by Noitidart 0
  • Move to prop-types package

    Move to prop-types package

    move to prop-types package

    opened by Noitidart 0
  • Scoll not smooth

    Scoll not smooth

    When i went to another screen and come back scroll not working smoothly in TabLayoutAndroid

    `<View style={styles.parentContainer}> <TabLayoutAndroid style={{height: 56}} backgroundColor='#6c1aa0' indicatorTabColor='#00bcd4' indicatorTabHeight={2} scrollable={false} center={false}>

                    <TabLayoutAndroid.Item
                        text='Lessons'
                        textSize={16}
                        textColor="#ebcbff"
                        selectedTextColor='#ffffff'>
                        <Lessons navigator={this.props.navigator} lessons={this.props.lessons}/>
                    </TabLayoutAndroid.Item>
    
                    <TabLayoutAndroid.Item
                        text='Activity'
                        textSize={16}
                        textColor="#ebcbff"
                        selectedTextColor='#ffffff'>
                        <Activity navigator={this.props.navigator} assignments={this.props.assignments}/>
                    </TabLayoutAndroid.Item>
    
                    <TabLayoutAndroid.Item
                        text='Project'
                        textSize={16}
                        textColor="#ebcbff"
                        selectedTextColor='#ffffff'>
                        {/*<Project navigator={this.props.navigator}/>*/}
                    </TabLayoutAndroid.Item>
    
                </TabLayoutAndroid>
    
    opened by moorthysubu 0
  • Can't add property 4, object is not extensible

    Can't add property 4, object is not extensible

    I get the following error when using TabLayoutAndroid and React-native navigator. The error occurs when I try to push to another route. I have the following code:

    
    <View>
                  <ButtonAndroid
                    text='Custom Button'
                    onPress={
    
                      () => {
                          this.props.navigator.push(anotherRoute());
                      }
                    }
                    />
            </View>
            <View style={{ flex: 1 }}>
              <TabLayoutAndroid style={{ height: 40 }} backgroundColor='#F9F9F9' indicatorTabColor='#000000'
                indicatorTabHeight={2} scrollable={true} center={false} >
                <TabAndroid text='All' textSize={14} textColor="#000000" selectedTextColor='#000000'
                  icon='ic_home_black_24dp' scrollEnabled={false} iconPosition='left'>
                  <Text>I'm the firstTab content!</Text>
                </TabAndroid>
                <TabAndroid text='Online' textSize={14} textColor="#000000" selectedTextColor='#000000'
                  icon='ic_important_devices_black_24dp' scrollEnabled={false}  iconPosition='left'>
                  <Text>I'm the second Tab content!</Text>
                </TabAndroid>
                <TabAndroid text='Pending' textSize={14} textColor="#000000" selectedTextColor='#000000'
                  icon='ic_important_devices_black_24dp' iconPosition='left'>
                  <Text>I'm the third Tab content!</Text>
                </TabAndroid>
                <TabAndroid text='Blocked' textSize={14} textColor="#000000" selectedTextColor='#000000'
                  icon='ic_important_devices_black_24dp' iconPosition='left'>
                  <Text>I'm the third Tab content!</Text>
                </TabAndroid>
              </TabLayoutAndroid>
    
            </View>
    
    
    opened by kiwijus 0
  • Programmatically set the current active tab in TabLayoutAndroid?

    Programmatically set the current active tab in TabLayoutAndroid?

    I'm really diggin' the TabLayoutAndroid component. However, there doesn't seem to be a way to programmatically set the active tab in JS.

    E.g., I would love to be able to do something along the lines of:

    <TabLayoutAndroid selectedTab="kittensTab">
       <TabAndroid id="allPicturesTab" />
       <TabAndroid id="kittensTab" />
       <TabAndroid id="dogsTab" />
    </TabLayoutAndroid>
    

    Thanks again! :)

    todo-next-release 
    opened by tituswoo 1
  • FAB appearance broken on android 4.4

    FAB appearance broken on android 4.4

    Hi, thanks for the lib! I was trying it out successfully on android 6, but I have met an issue when running under 4.4: the appearance of FAB is broken (see picture)

    fabbug

    help wanted confirmed-bug 
    opened by vonovak 3
Owner
Ayoub Adib
🎮
Ayoub Adib
A react native android package to show a circle progress view

Circle progress view for react-native android A react native android module to show a circle progress view based on [Circle-Progress-View] (https://gi

null 16 Aug 7, 2019
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
The react-native UI Kit you've been looking for.

React-Virgin The React-Native UI Kit you've been looking for Made with lots of ❤️ What is React-Virgin? Boiler plate UI kit for your React-Native proj

Trixie 1.5k Nov 29, 2021
📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)

??React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)

null 2k Dec 2, 2021
📢 A react native implementation of the package SCLAlertView-Swift

react-native-scl-alert A pure react native javascript implementation of the package https://github.com/vikmeup/SCLAlertView-Swift Road Map Documentati

Rafael Michels Motta 211 Nov 9, 2021
🔎 React-Native package to decorate TextInput and get suggestions with good UX

react-native-suggester React-Native package to decorate TextInput and get suggestions with good UX How to use it ? import { SuggesterProvider, Suggest

Xavier Carpentier 49 Nov 4, 2021
react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

React Native TimeLine Theme Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList Get Started Inspired by react-nat

Zaku 43 Oct 9, 2021
React Native Tip is a simple package inspired in MaterialUI-Tooltip

React Native Tip is a simple package inspired in MaterialUI-Tooltip that helps you to show a quick tip to the user and highlight some important item in your app. It is useful to explain the user some funcionality.

Maicon Gilton de Souza Freire 29 Nov 20, 2021
This is a React-Native package to display every 254 Country flags with the ISO 3166-1 alpha-2 Standard!

react-native-country-flag This is a React-Native package to display every 254 Country flags with the ISO 3166-1 alpha-2 Standard! Install npm install

Yannis Hofmann 8 Oct 15, 2021
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Abhiram K 20 Nov 15, 2021
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021
A react native slidable drawer package

React Native Slidable Drawer Panel React Native slidable drawer designed using react native's Animated and PanResponder APIs. Purely Typescript. Insta

Lisha 2 Nov 10, 2021
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 296 Nov 23, 2021
This reactnative package provides custom header component for mobile apps. also providing utility method to change statusbar color.

A @mindinventory/rn-top-navbar package is use to create custom navigation for react native apps. user can fully customize navbar. you can change the background color of statusbar. Navigation can contain component like icon, image, text.

MindInventory 17 Aug 9, 2021
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Nov 24, 2021
A react native android module to control the android statusbar.

Status bar for React Native Android A react native android module to control the android statusbar. Setup There are five steps in the setup process in

Nishanth Shankar 146 Nov 15, 2021
React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Lucas Ferreira 42 Mar 1, 2020
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

Layton Whiteley 32 May 26, 2020
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 411 Nov 24, 2021