React Native Input Losing Focus after a keystroke - reactjs

Question

So I am having a problem after just typing 1 key into a textfield the textfield is re-rendering and losing focus.
Here are some snippets of code, if you need more do not hesitate to ask:
Here is the DiaryInput Component:
const DiaryInput = ({label, value, onChangeText, placeholder, secureTextEntry, autoCorrect, autoCapitalize}) => {
const {inputStyle, labelStyle, containerStyle} = styles;
return (
<View style={containerStyle}>
<Text style={labelStyle}>
{label}
</Text>
<TextInput
secureTextEntry={secureTextEntry}
placeholder={placeholder}
autoCorrect={autoCorrect}
autoCapitalize={autoCapitalize}
style={[inputStyle, {height: Platform.OS === 'android' ? 50 : 25}]}
value={value}
onChangeText={onChangeText}
keyboardType={'numeric'}
/*editable={false}*//>
</View>
)};
Here I am using the Component (within render()):
import React, {Component} from 'react';
import {ScrollView} from 'react-native';
import {DiaryInput} from "../DiaryInput";
import {DiarySlider} from "../DiarySlider";
import DiaryHeader from "../DiaryHeader";
import {TextArea} from "../common/TextArea";
import {connect} from 'react-redux';
import {
carbsChanged,
fatsChanged,
proteinChanged,
dailyWeightChanged,
hoursSleepChanged,
feelLevelChanged,
wodChanged,
notesChanged,
journalChanged,
dateChangedLeft,
dateChangedRight,
getDiaryInfo,
saveDiaryInfo
} from "../../actions/DiaryActions";
class DiaryPage extends Component {
componentWillMount() {
// this.props.getDiaryInfo();
// this.state.currentDateString = dateString;
this.props.currentDate = new Date();
}
onCarbsChanged(text) {
this.props.carbsChanged(text);
}
onFatsChanged(text) {
this.props.fatsChanged(text);
}
onProteinChanged(text) {
this.props.proteinChanged(text);
}
onDailyWeightChanged(text) {
this.props.dailyWeightChanged(text);
}
onHoursSleepChanged(text) {
this.props.hoursSleepChanged(text);
}
onFeelLevelChanged(value) {
this.props.feelLevelChanged(value);
}
onWODChanged(text) {
this.props.wodChanged(text);
}
onNotesChanged(text) {
this.props.notesChanged(text);
}
onJournalChanged(text) {
this.props.journalChanged(text);
}
onRightChanged(date) {
this.props.dateChangedRight(date);
}
onLeftChanged(date) {
this.props.dateChangedLeft(date);
}
render() {
return (
<ScrollView>
<DiaryHeader
text={this.props.currentDate.toLocaleString("en-US")}
onLeft={this.onLeftChanged(this.props.currentDate)}
onRight={this.onRightChanged(this.props.currentDate)}/>
<DiaryInput
label={"Carbs"}
value={this.props.carbs}
onChangeText={this.onCarbsChanged.bind(this)}/>
<DiaryInput
label={"Fat"}
value={this.props.fats}
onChangeText={this.onFatsChanged.bind(this)}/>
<DiaryInput
label={"Protein"}
value={this.props.proteins}
onChangeText={this.onProteinChanged.bind(this)}/>
<DiaryInput
label={"Daily Weight"}
value={this.props.dailyWeight}
onChangeText={this.onDailyWeightChanged.bind(this)}/>
<DiaryInput
label={"Hours Sleep"}
value={this.props.hoursSleep}
onChangeText={this.onHoursSleepChanged.bind(this)}/>
<DiarySlider
label={"Feel Level"}
value={this.props.feelLevel}
onChangeText={this.onFeelLevelChanged.bind(this)}/>
<TextArea
label={"WOD"}
value={this.props.wod}
onChangeText={this.onWODChanged.bind(this)}/>
<TextArea
label={"Notes"}
value={this.props.notes}
onChangeText={this.onNotesChanged.bind(this)}/>
<TextArea
label={"Journal"}
value={this.props.journal}
onChangeText={this.onJournalChanged.bind(this)}/>
</ScrollView>
)
}
}
function mapStateToProps({diary}) {
const {carbs, fats, proteins, dailyWeight, hoursSleep, feelLevel, wod, notes, journal, currentDate} = diary;
return {carbs, fats, proteins, dailyWeight, hoursSleep, feelLevel, wod, notes, journal, currentDate};
}
export default connect(mapStateToProps, {
carbsChanged,
fatsChanged,
proteinChanged,
dailyWeightChanged,
hoursSleepChanged,
feelLevelChanged,
wodChanged,
notesChanged,
journalChanged,
dateChangedLeft,
dateChangedRight,
getDiaryInfo,
saveDiaryInfo
})(DiaryPage);
Here I have the function for when text Changes:
onHoursSleepChanged(text) {
this.props.hoursSleepChanged(text);
}
The Action:
export const hoursSleepChanged = (text) => {
return {
type: HOURS_SLEEP_CHANGED,
payload: text
}};
Reducer:
case HOURS_SLEEP_CHANGED:
return {...state, hoursSleep: action.payload};
And I think that's all that is needed...
The action and reducer is working properly... Just the input is losing focus after a single keystroke...
Please let me know if you have an idea on this. I have been struggling to find the cause.
Thank you!