Merge branch 'master' into release

demo/src/index.js

@@ -164,6 +164,9 @@ module.exports = {
  return require('./screens/componentScreens/WizardScreen').default;
  },
  // nativeComponentScreens
+ get DynamicFontsScreen() {
+ return require('./screens/nativeComponentScreens/DynamicFontsScreen').default;
+ },
  get HighlightOverlayViewScreen() {
  return require('./screens/nativeComponentScreens/HighlightOverlayViewScreen').default;
  },

demo/src/screens/MenuStructure.js

@@ -141,6 +141,11 @@ export const navigationData = {
  tags: 'KeyboardAwareScrollView',
  screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
  },
+ {
+ title: 'Dynamic Fonts',
+ tags: 'dynamic fonts load download',
+ screen: 'unicorn.nativeComponents.DynamicFontsScreen'
+ },
  {
  title: 'Highlight Overlay',
  tags: 'native overlay',

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, View, Text, Checkbox} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class CheckboxScreen extends Component {
  state = {
@@ -9,17 +9,19 @@ export default class CheckboxScreen extends Component {
  value3: true,
  value4: true,
  value5: false,
- value6: false
+ value6: false,
+ value7: true
  };
-
+ 
  render() {
  return (
  <View flex padding-page>
  <Text text40 $textDefault marginB-20>
  Checkbox
  </Text>
 
- <Text marginB-s4>Customizable UI</Text>
+ <Text marginV-s4>Customizable UI</Text>
+
  <View row marginB-s5 centerV>
  <Checkbox value={this.state.value1} onValueChange={value1 => this.setState({value1})}/>
  <Checkbox
@@ -50,10 +52,18 @@ export default class CheckboxScreen extends Component {
  containerStyle={styles.checkbox}
  />
 
+ <Checkbox
+ value={this.state.value7}
+ onValueChange={value7 => this.setState({value7})}
+ indeterminate
+ label={'Indeterminate state'}
+ color={Colors.green20}
+ containerStyle={styles.checkbox}
+ />
+
  <View row style={styles.row}>
- <Text $textDefault marginR-10>
- Disabled States
- </Text>
+ <Text $textDefault marginR-10>Disabled States</Text>
+
  <Checkbox
  disabled
  value={this.state.value5}

demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
+import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo, TouchableOpacity, ColorPickerDialog} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 interface State {
@@ -10,6 +10,7 @@ interface State {
  customColors: string[];
  paletteChange: boolean;
  backgroundColor: string;
+ showPicker: boolean;
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -31,7 +32,8 @@ export default class ColorPickerScreen extends Component<{}, State> {
  textColor: Colors.$textDefaultLight,
  customColors: [],
  paletteChange: false,
- backgroundColor: Colors.$backgroundDefault
+ backgroundColor: Colors.$backgroundDefault,
+ showPicker: false
  };
 
  onDismiss = () => {
@@ -123,6 +125,25 @@ export default class ColorPickerScreen extends Component<{}, State> {
  </Text>
  </View>
  </View>
+
+ <Text center text60 marginT-10>Color Picker Dialog</Text>
+ <View center>
+ <TouchableOpacity
+ margin-10 
+ center
+ style={{width: 60, height: 60, borderWidth: 1, borderRadius: 30, backgroundColor: color}} 
+ onPress={() => this.setState({showPicker: true})}
+ >
+ <Text>Press</Text>
+ </TouchableOpacity>
+ </View>
+ <ColorPickerDialog
+ visible={this.state.showPicker}
+ initialColor={color}
+ key={color}
+ onDismiss={() => this.setState({showPicker: false})}
+ onSubmit={this.onSubmit}
+ />
  </ScrollView>
  );
  }

demo/src/screens/nativeComponentScreens/DynamicFontsScreen.tsx

@@ -0,0 +1,120 @@
+import React, {Component, Fragment} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Button, DynamicFonts} from 'react-native-ui-lib';
+import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+enum FontLoadingEnum {
+ SINGLE_FONT = 'singleFont',
+ FONT_FAMILY = 'fontFamily'
+}
+
+type State = {
+ fontLoadingType: FontLoadingEnum;
+ loadedFonts: string[];
+};
+
+export default class DynamicFontsScreen extends Component<{}, State> {
+ private fontDownloader: InstanceType<typeof DynamicFonts> = new DynamicFonts({debug: true});
+
+ state = {
+ fontLoadingType: FontLoadingEnum.SINGLE_FONT,
+ loadedFonts: []
+ };
+
+ renderSingleFont = () => {
+ const {loadedFonts} = this.state;
+ return (
+ <Fragment>
+ <Text style={{fontSize: 24, lineHeight: 28, fontFamily: 'System'}}>{`
+System:
+ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
+ `}</Text>
+ {loadedFonts.length > 0 && (
+ <Text marginT-20 style={{fontSize: 24, lineHeight: 28, fontFamily: loadedFonts[0]}}>{`
+${loadedFonts}:
+ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
+ `}</Text>
+ )}
+ <Button
+ marginV-20
+ label="Load a single font"
+ onPress={async () => {
+ try {
+ const loadedFonts = await this.fontDownloader.getFont({
+ fontUri:
+ 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/TypographyKits/fonts/Vollkorn/Vollkorn-Regular.ttf',
+ fontName: 'Vollkorn-Regular',
+ fontExtension: 'ttf'
+ });
+ this.setState({loadedFonts: [loadedFonts]});
+ } catch (error) {
+ console.log('Error!', error);
+ }
+ }}
+ />
+ </Fragment>
+ );
+ };
+
+ renderFontFamily = () => {
+ const {loadedFonts} = this.state;
+ return (
+ <Fragment>
+ <Text style={{fontSize: 16, lineHeight: 18, fontFamily: 'System'}}>{`
+System:
+ABCDEFGH abcdefgh
+ `}</Text>
+ <ScrollView>
+ {loadedFonts?.map(loadedFont => (
+ <Text key={loadedFont} style={{fontSize: 16, lineHeight: 18, fontFamily: loadedFont}}>{`
+${loadedFont}:
+ABCDEFGH abcdefgh
+ `}</Text>
+ ))}
+ </ScrollView>
+
+ <Button
+ marginV-20
+ label="Load a complete font family"
+ onPress={async () => {
+ try {
+ const loadedFonts = await this.fontDownloader.getFontFamily('https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/TypographyKits/fonts/Vollkorn/',
+ [
+ 'Bold',
+ 'BoldItalic',
+ 'ExtraBold',
+ 'ExtraBoldItalic',
+ 'Italic',
+ 'Medium',
+ 'MediumItalic',
+ 'Regular',
+ 'SemiBold'
+ ],
+ 'ttf',
+ 'Vollkorn-');
+ this.setState({loadedFonts});
+ } catch (error) {
+ console.log('Error!', error);
+ }
+ }}
+ />
+ </Fragment>
+ );
+ };
+
+ render() {
+ const {fontLoadingType, loadedFonts} = this.state;
+ return (
+ <View bg-grey80 flex padding-20>
+ {renderMultipleSegmentOptions.call(this, 'Font loading:', 'fontLoadingType', [
+ {label: 'Single', value: FontLoadingEnum.SINGLE_FONT},
+ {label: 'Family', value: FontLoadingEnum.FONT_FAMILY}
+ ])}
+ <View flex center key={`${loadedFonts}`}>
+ {fontLoadingType === FontLoadingEnum.SINGLE_FONT ? this.renderSingleFont() : this.renderFontFamily()}
+ {loadedFonts && <Text text80>Loaded fonts: {loadedFonts.map(loadedFont => `${loadedFont} `)}</Text>}
+ </View>
+ </View>
+ );
+ }
+}

demo/src/screens/nativeComponentScreens/index.js

@@ -1,4 +1,5 @@
 export function registerScreens(registrar) {
+ registrar('unicorn.nativeComponents.DynamicFontsScreen', () => require('./DynamicFontsScreen').default);
  registrar('unicorn.nativeComponents.HighlightOverlayViewScreen', () => require('./HighlightOverlayViewScreen').default);
  registrar('unicorn.nativeComponents.SafeAreaSpacerViewScreen', () => require('./SafeAreaSpacerViewScreen').default);
  registrar('unicorn.nativeComponents.KeyboardTrackingViewScreen', () => require('./KeyboardTrackingViewScreen').default);

docs/getting-started/setup.md

@@ -34,7 +34,7 @@ If you plan on using specific components, see **UILib Packages** above.
 
 ### Peer Dependencies
 UILIb has mandatory peer dependencies on the following packages:
-- react-native-reanimated (Make sure to follow [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation))
+- react-native-reanimated (Make sure to follow [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started))
 - react-native-gesture-handler
 
 ### Optional Dependencies
@@ -68,6 +68,10 @@ Some of the components are using the native dependencies listed below - those ar
 - `cd react-native-ui-lib`
 - Install dependencies `npm install`
 - (for iOS) `cd ios && pod install`
+- (for Windows)
+ - update `...&& export DEV_MODE...` with `...&& set DEV_MODE...`
+ - copy `gradlew.bat` from a recent project to `./android/`
+ - install fb-watchman for [windows](https://facebook.github.io/watchman/docs/install#prebuilt-binaries) or `choco install watchman` 
 - Start the packager `npm start`
 - Build the app `npm run ios` or `npm run android` (or from Xcode or Android Studio).
 

jestSetup/jest-setup.js

@@ -115,6 +115,17 @@ jest.mock('react-native', () => {
  return reactNative;
 });
 
+jest.mock('react-native-fs',
+ () => {
+ return {
+ exists: jest.fn(() => true),
+ readFile: jest.fn(),
+ downloadFile: jest.fn(),
+ mkdir: jest.fn()
+ };
+ },
+ {virtual: true});
+
 Animated.timing = (value, config) => ({
  start: callback => {
  value.setValue(config.toValue);

lib/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 import com.facebook.react.ReactPackage;
 
+import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
 import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
 import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;
@@ -20,6 +21,7 @@ public UiLibPackageList(Application application) {
 
  public List<ReactPackage> getPackageList() {
  return Arrays.asList(
+ new DynamicFontPackage(),
  new HighlighterViewPackage(),
  new TextInputDelKeyHandlerPackage(),
  new KeyboardInputPackage(application)