How to use the react-native-ios-kit.withTheme function in react-native-ios-kit

To help you get started, we’ve selected a few react-native-ios-kit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github callstack / react-native-ios-kit / example / src / scenes / Stepper.js View on Github external
No min. and max. values.
            Step === 2.
          
          {this.state.value3}
           this.setState({ value3 })}
            stepValue={2}
          />
        
      
    );
  }
}

export default withTheme(withSafeArea(StepperExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  row: {
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomColor: '#666',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});
github callstack / react-native-ios-kit / example / src / scenes / SearchBar.js View on Github external
};
  render() {
    return (
      
    );
  }
}

export default withTheme(withSafeArea(SearchBarExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});
github callstack / react-native-ios-kit / example / src / scenes / SegmentedControl.js View on Github external
selectedValue: value,
              selectedIndex: index,
            })
          }
          style={{ width: 222, alignSelf: 'center' }}
        />
        
      
    );
  }
}

export default withTheme(withSafeArea(SegmentedExample));

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
  },
  content: {
    padding: 10,
  },
});
github callstack / react-native-ios-kit / example / src / scenes / Slider.js View on Github external
onValueChange={value => this.setState({ value4: value })}
          minIconName="ios-sunny"
          maxIconName="ios-sunny"
          minTrackTintColor={this.props.theme.positiveColor}
          maxTrackTintColor={this.props.theme.primaryColor}
          minIconColor={this.props.theme.positiveColor}
          maxIconColor={this.props.theme.primaryColor}
          minimumValue={10}
          maximumValue={40}
        />
      
    );
  }
}

export default withTheme(withSafeArea(SliderExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});
github callstack / react-native-ios-kit / example / src / scenes / TabBar.js View on Github external
},
            {
              icon: 'ios-people',
              title: 'Disabled',
              onPress: this.selectTab,
              isActive: this.state.activeTab === 3,
              disabled: true,
            },
          ]}
        />
      
    );
  }
}

export default withTheme(withSafeArea(TabBarExample));

const styles = StyleSheet.create({
  screen: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
github callstack / react-native-ios-kit / example / src / scenes / Toolbar.js View on Github external
icon: 'ios-refresh',
              onPress: this.runAction,
            },
            {
              icon: 'ios-share',
              onPress: this.runAction,
              disabled: true,
            },
          ]}
        />
      
    );
  }
}

export default withTheme(withSafeArea(ToolbarExample));

const styles = StyleSheet.create({
  screen: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
github callstack / react-native-ios-kit / example / src / ExampleListItem.js View on Github external
render() {
    const { onPressRow, rowData } = this.props;

    return (
       onPressRow(rowData)}
        withoutHeader
        withoutFooter
        rightComponent={}
      />
    );
  }
}

export default withTheme(ExampleLitItem);
github callstack / react-native-ios-kit / example / src / scenes / Icons.js View on Github external
/>
            }
            info="
    );
  }
}

export default withTheme(withSafeArea(IconsExample));

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingVertical: 10,
  },
});
github callstack / react-native-ios-kit / example / src / scenes / Collection.js View on Github external
<img>}
        renderSectionHeader={({ section }) =&gt; (
          {section.title}
        )}
        keyExtractor={(item, index) =&gt; `${item}_${index}`}
        refreshing={this.state.refreshing}
        onRefresh={this.refresh}
      /&gt;
    );
  }
}

export default withTheme(withSafeArea(CollectionExample));

const styles = StyleSheet.create({
  sectionHeader: {
    backgroundColor: 'rgba(255,255,255,0.5)',
  },
});
github callstack / react-native-ios-kit / example / src / scenes / Buttons.js View on Github external
<button style="{[styles.button," color="{customColor}" disabled="">
          Custom button (centered/disabled)
        </button>
      
    );
  }
}

export default withTheme(withSafeArea(Buttons));

const customColor = '#FF3A30';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    paddingHorizontal: 15,
  },
  button: {
    marginVertical: 5,
  },
  combineButtonsContainer: {
    flexDirection: 'row',
    marginVertical: 5,
  },
  roundedButton: {

react-native-ios-kit

The missing React Native UI Kit for iOS.

MIT
Latest version published 5 years ago

Package Health Score

51 / 100
Full package analysis

Popular react-native-ios-kit functions