<commit_before>// @flow

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  TouchableNativeFeedback,
  TouchableOpacity,
  Text,
  Animated,
  Platform
} from 'react-native';

type Props = {
  barColor: string,
  activeTextColor: string,
  indicatorColor: string,
  items: string[],
  selectedIndex: number,
  onChange: (number) => void
}

type DefaultProps = {
  barColor: string,
  selectedIndex: number,
  activeTextColor: string,
  indicatorColor: string
}

type State = {
  tabWidth: number,
  indicatorPosition: Animated.Value
}

class MaterialTabs extends Component {
  props: Props;
  static defaultProps: DefaultProps;
  state: State;

  state = {
    tabWidth: 0,
    indicatorPosition: new Animated.Value(0)
  }

  componentDidUpdate() {
    this._selectTab();
  }

  _findDimensions(event) {
    let {width} = event.nativeEvent.layout;

    this.setState({
      tabWidth: width/this.props.items.length
    })
  }

  _selectTab() {
    let {selectedIndex} = this.props;

    Animated.spring(
      this.state.indicatorPosition,
      {
        toValue: selectedIndex === 0 ? 0 : selectedIndex * this.state.tabWidth,
        tension: 100,
        friction: 10
      }
    ).start();
  }

  render() {
    const {tabWidth} = this.state;

    const styles = StyleSheet.create({
      tabBar: {
        flex: 1,
        backgroundColor: this.props.barColor,
        maxHeight: 48
      },
      tabTrack: {
        minHeight: 46,
        flexDirection: 'row'
      },
      tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      },
      label: {<commit_msg>Fixed bug where tab bar wasn't displaying<commit_after>// @flow

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  TouchableNativeFeedback,
  TouchableOpacity,
  Text,
  Animated,
  Platform
} from 'react-native';

type Props = {
  barColor: string,
  activeTextColor: string,
  indicatorColor: string,
  items: string[],
  selectedIndex: number,
  onChange: (number) => void
}

type DefaultProps = {
  barColor: string,
  selectedIndex: number,
  activeTextColor: string,
  indicatorColor: string
}

type State = {
  tabWidth: number,
  indicatorPosition: Animated.Value
}

class MaterialTabs extends Component {
  props: Props;
  static defaultProps: DefaultProps;
  state: State;

  state = {
    tabWidth: 0,
    indicatorPosition: new Animated.Value(0)
  }

  componentDidUpdate() {
    this._selectTab();
  }

  _findDimensions(event) {
    let {width} = event.nativeEvent.layout;

    this.setState({
      tabWidth: width/this.props.items.length
    })
  }

  _selectTab() {
    let {selectedIndex} = this.props;

    Animated.spring(
      this.state.indicatorPosition,
      {
        toValue: selectedIndex === 0 ? 0 : selectedIndex * this.state.tabWidth,
        tension: 100,
        friction: 10
      }
    ).start();
  }

  render() {
    const {tabWidth} = this.state;

    const styles = StyleSheet.create({
      tabBar: {
        backgroundColor: this.props.barColor,
        maxHeight: 48
      },
      tabTrack: {
        minHeight: 46,
        flexDirection: 'row'
      },
      tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      },
      label: {
{'fraction_non_alphanumeric': 0.11320182094081942, 'fraction_numerical': 0.008801213960546282, 'mean_word_length': 2.59432933478735, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5020025', 'n_tokens_mistral': 1083, 'n_tokens_neox': 1055, 'n_words': 242}