Merge branch 'master' into release

android/app/src/main/java/com/rnuilib/MainApplication.java

@@ -1,23 +1,19 @@
 package com.rnuilib;
 
-import android.app.Application;
-import android.content.Context;
-
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
-
-import java.util.List;
-import java.util.Arrays;
-
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.react.NavigationReactNativeHost;
 import com.reactnativenavigation.react.ReactGateway;
-
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
+import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
 import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;
 import com.wix.reactnativeuilib.wheelpicker.WheelPickerPackage;
 
+import java.util.Arrays;
+import java.util.List;
+
 
 public class MainApplication extends NavigationApplication {
 
@@ -52,6 +48,7 @@ public List<ReactPackage> createAdditionalReactPackages() {
  packages.add(new HighlighterViewPackage());
  packages.add(new WheelPickerPackage());
  packages.add(new TextInputDelKeyHandlerPackage());
+ packages.add(new KeyboardInputPackage(this));
  return packages;
  }
 }

demo/src/index.js

@@ -5,5 +5,202 @@ I18nManager.allowRTL(true);
 
 module.exports = {
  name: 'unicorn demo app',
- ExampleScreenPresenter: require('./screens/ExampleScreenPresenter')
+ // componentScreens
+ get ActionSheetScreen() {
+ return require('./screens/componentScreens/ActionSheetScreen').default;
+ },
+ get ActionBarScreen() {
+ return require('./screens/componentScreens/ActionBarScreen').default;
+ },
+ get AvatarsScreen() {
+ return require('./screens/componentScreens/AvatarsScreen').default;
+ },
+ get AnimatedImageScreen() {
+ return require('./screens/componentScreens/AnimatedImageScreen').default;
+ },
+ get ButtonsScreen() {
+ return require('./screens/componentScreens/ButtonsScreen').default;
+ },
+ get BadgesScreen() {
+ return require('./screens/componentScreens/BadgesScreen').default;
+ },
+ get CardsScreen() {
+ return require('./screens/componentScreens/CardsScreen').default;
+ },
+ get CarouselScreen() {
+ return require('./screens/componentScreens/CarouselScreen').default;
+ },
+ get CheckboxScreen() {
+ return require('./screens/componentScreens/CheckboxScreen').default;
+ },
+ get ConnectionStatusBarScreen() {
+ return require('./screens/componentScreens/ConnectionStatusBarScreen').default;
+ },
+ get DialogScreen() {
+ return require('./screens/componentScreens/DialogScreen').default;
+ },
+ get DrawerScreen() {
+ return require('./screens/componentScreens/DrawerScreen').default;
+ },
+ get TagsInputScreen() {
+ return require('./screens/componentScreens/TagsInputScreen').default;
+ },
+ get HintsScreen() {
+ return require('./screens/componentScreens/HintsScreen').default;
+ },
+ get ImageScreen() {
+ return require('./screens/componentScreens/ImageScreen').default;
+ },
+ get MaskedInputScreen() {
+ return require('./screens/componentScreens/MaskedInputScreen').default;
+ },
+ get OverlaysScreen() {
+ return require('./screens/componentScreens/OverlaysScreen').default;
+ },
+ get PageControlScreen() {
+ return require('./screens/componentScreens/PageControlScreen').default;
+ },
+ get PanDismissibleScreen() {
+ return require('./screens/componentScreens/PanDismissibleScreen').default;
+ },
+ get PanListenerScreen() {
+ return require('./screens/componentScreens/PanListenerScreen').default;
+ },
+ get PanResponderScreen() {
+ return require('./screens/componentScreens/PanResponderScreen').default;
+ },
+ get PickerScreen() {
+ return require('./screens/componentScreens/PickerScreen').default;
+ },
+ get RadioButtonScreen() {
+ return require('./screens/componentScreens/RadioButtonScreen').default;
+ },
+ get SharedTransitionScreen() {
+ return require('./screens/componentScreens/SharedTransitionScreen').default;
+ },
+ get StepperScreen() {
+ return require('./screens/componentScreens/StepperScreen').default;
+ },
+ get SwitchScreen() {
+ return require('./screens/componentScreens/SwitchScreen').default;
+ },
+ get ToastsScreen() {
+ return require('./screens/componentScreens/ToastsScreen').default;
+ },
+ get TabBarScreen() {
+ return require('./screens/componentScreens/TabBarScreen').default;
+ },
+ get TextScreen() {
+ return require('./screens/componentScreens/TextScreen').default;
+ },
+ get TextFieldScreen() {
+ return require('./screens/componentScreens/TextFieldScreen').default;
+ },
+ get TourScreen() {
+ return require('./screens/componentScreens/TourScreen').default;
+ },
+ get FeatureHighlightScreen() {
+ return require('./screens/componentScreens/FeatureHighlightScreen').default;
+ },
+ get WheelPickerDialogScreen() {
+ return require('./screens/componentScreens/WheelPickerDialogScreen').default;
+ },
+ get SliderScreen() {
+ return require('./screens/componentScreens/SliderScreen').default;
+ },
+ get FloatingButtonScreen() {
+ return require('./screens/componentScreens/FloatingButtonScreen').default;
+ },
+ get ColorPickerScreen() {
+ return require('./screens/componentScreens/ColorPickerScreen').default;
+ },
+ get ColorSwatchScreen() {
+ return require('./screens/componentScreens/ColorSwatchScreen').default;
+ },
+ get StackAggregatorScreen() {
+ return require('./screens/componentScreens/StackAggregatorScreen').default;
+ },
+ get DateTimePickerScreen() {
+ return require('./screens/componentScreens/DateTimePickerScreen').default;
+ },
+ get WizardScreen() {
+ return require('./screens/componentScreens/WizardScreen').default;
+ },
+ // nativeComponentScreens
+ get HighlightOverlayViewScreen() {
+ return require('./screens/nativeComponentScreens/HighlightOverlayViewScreen').default;
+ },
+ get SafeAreaSpacerViewScreen() {
+ return require('./screens/nativeComponentScreens/SafeAreaSpacerViewScreen').default;
+ },
+ get WheelPickerViewScreen() {
+ return require('./screens/nativeComponentScreens/WheelPickerViewScreen').default;
+ },
+ // componentScreenScreens
+ get EmptyStateScreen() {
+ return require('./screens/componentScreenScreens/EmptyStateScreen').default;
+ },
+ get LoadingScreen() {
+ return require('./screens/componentScreenScreens/LoadingScreen').default;
+ },
+ get ModalScreen() {
+ return require('./screens/componentScreenScreens/ModalScreen').default;
+ },
+ // listScreens
+ get BasicListScreen() {
+ return require('./screens/listScreens/BasicListScreen').default;
+ },
+ get ContactsListScreen() {
+ return require('./screens/listScreens/ContactsListScreen').default;
+ },
+ get ConversationListScreen() {
+ return require('./screens/listScreens/ConversationListScreen').default;
+ },
+ // styleScreens
+ get BorderRadiusesScreen() {
+ return require('./screens/styleScreens/BorderRadiusesScreen').default;
+ },
+ get ColorsScreen() {
+ return require('./screens/styleScreens/ColorsScreen').default;
+ },
+ get TypographyScreen() {
+ return require('./screens/styleScreens/TypographyScreen').default;
+ },
+ get ShadowsScreen() {
+ return require('./screens/styleScreens/ShadowsScreen').default;
+ },
+ get SpacingsScreen() {
+ return require('./screens/styleScreens/SpacingsScreen').default;
+ },
+ // animationScreens
+ get CardScannerScreen() {
+ return require('./screens/animationScreens/CardScannerScreen').default;
+ },
+ get CardAnimationsScreen() {
+ return require('./screens/animationScreens/CardAnimationsScreen').default;
+ },
+ get ListAnimationsScreen() {
+ return require('./screens/animationScreens/ListAnimationsScreen').default;
+ },
+ get ProgressBarScreen() {
+ return require('./screens/animationScreens/ProgressBarScreen').default;
+ },
+ // realExamples
+ get AppleMusic() {
+ return require('./screens/realExamples/AppleMusic').default;
+ },
+ get Pinterest() {
+ return require('./screens/realExamples/Pinterest').default;
+ },
+ get ListActionsScreen() {
+ return require('./screens/realExamples/ListActions/ListActionsScreen').default;
+ },
+ // wrapperScreens
+ get TouchableOpacityScreen() {
+ return require('./screens/wrapperScreens/TouchableOpacityScreen').default;
+ },
+ // General
+ get ExampleScreenPresenter() {
+ return require('./screens/ExampleScreenPresenter');
+ }
 };

demo/src/screens/ExampleScreenPresenter.js

@@ -1,29 +1,81 @@
-import React from 'react';
-import {View, Text, Checkbox, RadioGroup, RadioButton, ColorPalette, Colors, Slider} from 'react-native-ui-lib';
 import _ from 'lodash';
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Checkbox, ColorPalette, Colors, RadioButton, RadioGroup, Slider, Text, View} from 'react-native-ui-lib';
 
 export function renderBooleanOption(title, key) {
  const value = this.state[key];
  return (
- <View row centerV spread marginB-s4>
- <Text text70M style={{flex: 1}}>
+ <View row centerV spread marginB-s4 key={key}>
+ <Text text70 style={{flex: 1}}>
+ {title}
+ </Text>
+ <Checkbox
+ useCustomTheme
+ key={key}
+ textID={key}
+ value={value}
+ onValueChange={value => this.setState({[key]: value})}
+ />
+ </View>
+ );
+}
+
+export function renderBooleanGroup(title, options) {
+ return (
+ <View marginB-s2>
+ <Text text70M marginB-s2>
  {title}
  </Text>
- <Checkbox useCustomTheme textID={key} value={value} onValueChange={value => this.setState({[key]: value})}/>
+ <View row style={styles.rowWrap}>
+ {_.map(options, key => {
+ const value = this.state[key];
+ return (
+ <View spread centerH row key={key}>
+ <Checkbox
+ marginR-s2
+ useCustomTheme
+ key={key}
+ textID={key}
+ value={value}
+ onValueChange={value => this.setState({[key]: value})}
+ />
+ <Text text70 marginR-s3 marginB-s2>
+ {key}
+ </Text>
+ </View>
+ );
+ })}
+ </View>
  </View>
  );
 }
 
-export function renderRadioGroup(title, key, options) {
+export function renderRadioGroup(title, key, options, {isRow} = {}) {
  const value = this.state[key];
  return (
  <View marginB-s2>
  <Text text70M marginB-s2>
  {title}
  </Text>
- <RadioGroup initialValue={value} onValueChange={value => this.setState({[key]: value})}>
+ <RadioGroup
+ row={isRow}
+ style={isRow && styles.rowWrap}
+ initialValue={value}
+ onValueChange={value => this.setState({[key]: value})}
+ >
  {_.map(options, (value, key) => {
- return <RadioButton useCustomTheme testID={key} key={key} marginB-s2 label={value} value={options[key]}/>;
+ return (
+ <RadioButton
+ useCustomTheme
+ testID={key}
+ key={key}
+ marginB-s2
+ marginR-s2={isRow}
+ label={key}
+ value={value}
+ />
+ );
  })}
  </RadioGroup>
  </View>
@@ -46,7 +98,7 @@ export function renderColorOption(title,
  );
 }
 
-export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0}) {
+export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
  const value = this.state[key];
  return (
  <View marginV-s2>
@@ -64,9 +116,16 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
  onValueChange={value => this.setState({[key]: value})}
  />
  <Text marginL-s4 text70>
- text{value}
+ {sliderText}
+ {value}
  </Text>
  </View>
  </View>
  );
 }
+
+const styles = StyleSheet.create({
+ rowWrap: {
+ flexWrap: 'wrap'
+ }
+});

demo/src/screens/MainScreen.js

@@ -329,7 +329,7 @@ export default class MainScreen extends Component {
  <FlatList
  showsVerticalScrollIndicator={false}
  data={section.screens}
- keyExtractor={item => item.title}
+ keyExtractor={item => item.screen ? item.title : `header_${item.title}`}
  renderItem={this.renderItem}
  />
  </View>

demo/src/screens/MenuStructure.js

@@ -34,16 +34,19 @@ export const navigationData = {
  {title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
  {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
  {title: 'Image', tags: 'image cover overlay', screen: 'unicorn.components.ImageScreen'},
+ {title: 'KeyboardAwareScrollView', tags: 'KeyboardAwareScrollView', screen: 'unicorn.components.KeyboardAwareScrollViewScreen'},
  {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
  {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
  {title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
  {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
  {title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'},
+ {title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
  {title: 'Shared Transition', tags: 'shared transition element', screen: 'unicorn.components.SharedTransitionScreen'},
  {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
  {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
  {title: 'Text', tags: 'text', screen: 'unicorn.components.TextScreen'},
  {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
+ {title: 'View', tags: 'view modifiers', screen: 'unicorn.components.ViewScreen'},
  {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
  {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
  ]
@@ -74,7 +77,9 @@ export const navigationData = {
  screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
  },
  {title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'},
- {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'}
+ {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
+ {title: 'KeyboardTracking (iOS)', tags: 'KeyboardTracking', screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'},
+ {title: 'KeyboardInput', tags: 'KeyboardInput', screen: 'unicorn.nativeComponents.KeyboardInputViewScreen'}
  ]
  },
  Screens: {