React Native can't correctly display number

I'm using React Native for write an application in Android, but it can't correctly display number, Order number is like：18,19,2 ,21,2 ,2 ,picture is below:

Some code is:

<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}> {selectedDate ? ( <> <Text style={[styles.dateText, { color: isDark ? '#fff' : '#000' }]}> {selectedDate} 的待办任务数量： </Text> {currentTasks.length > 0 && ( <View style={[styles.circle, { backgroundColor: '#2196F3', marginLeft: 6, marginTop: -10 }]}> <Text style={styles.circleText}>{currentTasks.length}</Text> </View> )} </> ) : (

Other code is :

renderItem={({ item, index }) => ( <View style={[styles.taskItem, { backgroundColor: isDark ? '#222' : '#f3f3f3' }]}> <View style={styles.taskRow}> <View style={[styles.circle, { backgroundColor: '#2196F3' }]}> <Text style={styles.circleText}>{index + 1}</Text> </View> <Text selectable style={[styles.taskText, { color: isDark ? '#fff' : '#000' }]}>{item}</Text> </View> <View style={styles.taskButtonsRow}> <TouchableOpacity onPress={() => deleteTask(selectedDate, index)} style={styles.leftDeleteBtn}> <Text style={styles.leftDeleteText}>删除</Text> </TouchableOpacity> <TouchableOpacity onPress={() => finishTask(selectedDate, index)} style={styles.rightDoneBtn}> <Text style={styles.rightDoneText}>做完</Text> </TouchableOpacity> </View> </View> )} />

And the styles code is:

const styles = StyleSheet.create({ container: { flex: 1 }, dateText: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 }, taskItem: { padding: 12, marginVertical: 6, borderRadius: 10 }, taskRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 8 }, circle: { width: 28, height: 28, borderRadius: 14, justifyContent: 'center', alignItems: 'center', marginRight: 10 }, circleText: { color: '#fff', fontWeight: 'bold' }, taskText: { fontSize: 17, flexShrink: 1 }, taskButtonsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 6 }, leftDeleteBtn: { backgroundColor: '#C62828', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 }, leftDeleteText: { color: 'white', fontSize: 16 }, rightDoneBtn: { backgroundColor: '#4CAF50', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 }, rightDoneText: { color: 'white', fontSize: 16 }, inputContainer: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 10, borderTopWidth: 1, borderColor: '#ccc', flexDirection: 'row', alignItems: 'center', }, input: { flex: 1, borderWidth: 1, borderRadius: 8, padding: 10, marginRight: 10 }, });

Where is the error? And how to solve it? Thank you in advance.